Serving WEBP with nginx conditionally for Laravel

Question

I'm not able to serve jpeg or png images to webp on my Ubuntu server.

The request:

Request URL: https://staging.myserver.com/images/mainfoto.jpg 
Request Method: GET

And the response is:

accept-ranges: bytes
content-length: 304152
content-type: image/jpeg
date: Mon, 07 Oct 2019 17:33:14 GMT
etag: "5d9a2b60-4a418"
last-modified: Sun, 06 Oct 2019 17:58:56 GMT
server: nginx/1.14.0 (Ubuntu)
status: 200
vary: Accept

In sudo nano /etc/nginx/nginx.conf

http {
...
include /etc/nginx/mime.types; #I checked the webp is included
...
    map $http_accept $webp_suffix {
       default "";
       "~*webp" ".webp";
    }
...
}

And then in my sudo nano /etc/nginx/sites-available/staging.myserver.com

# Checking if there's a WebP version for the requested image ..
location ~* ^.+\.(jpe?g|png)$ {
   add_header Vary Accept;
   # and if so, serving it
   try_files $1$webp_suffix $uri =404;
}

And finished with:

sudo nginx -t
sudo systemctl reload nginx

And deleted browser cache with a hard reload

Any ideas what I could do?

---

Full server config file here:

server {
    server_name staging.myserver.com;
    root /var/www/myserver-staging/current/public;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    index index.html index.htm index.php;

    charset utf-8;

    location / {
        try_files $uri $uri/ /index.php?$query_string;

        auth_basic "Staff Only";
        auth_basic_user_file "/var/www/myserver/.htpasswd";
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    error_page 404 /index.php;

    location ~ \.php$ {
        fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }
    # Checking if there's a WebP version for the requested image ..
    location ~* ^.+\.(jpe?g|png)$ {
       add_header Vary Accept;
       # and if so, serving it
       try_files $1$webp_suffix $uri =404;
    }
    location ~ /\.(?!well-known).* {
        deny all;
    }
   listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/staging.myserver.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/staging.myserver.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot


}
server {
    if ($host = staging.myserver.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    server_name staging.myserver.com;



    listen 80;
    return 404; # managed by Certbot


}

Answer 1

According to the comments below your question, the initial problem was that your code captured the file extension of a requested image, and searched for a file which file name was made up of the file extension and the trailing webp suffix, for example jpg.webp.

--

Regarding how to serve either image.webp or image.jpg etc:

Populate the variables which are needed:

# Check if client is capable of handling webp
map $http_accept $webp_suffix {
       default "";
       "~*webp" ".webp";
}

# Capture image path, without the file extension
map $uri $image {
       ~*^/(images)/(.+)\.(jpe?g|png)$  /$1/$2;
}

...and use these in the following location:

location /images {
       add_header Vary Accept;
       try_files $image$webp_suffix $uri =404;
}