1

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


}
5
  • Basic idea from here: github.com/uhop/grunt-tight-sprite/wiki/… – Philipp Mochine Oct 7 '19 at 18:00
  • Does mainfoto.jpg.webp exist? – gf_ Oct 7 '19 at 18:46
  • @gf_ yes it does. Actually every picture has a duplication of *.webp. So if I request staging.myserver.com/images/mainfoto.webp I get the right picture – Philipp Mochine Oct 7 '19 at 19:08
  • 1
    I've asked for mainfoto.jpg.webp, however, you referred to mainfoto.webp. Note the missing .jpg part in between. Your code above captures the file path, including the file extension, in this case .jpg. It then searches for a file with traling .webp. Ensure the file the code searches for does indeed exist. Edit: Scratch this, I've read your code wrong. Your current code only captures the file extentions, and searches for a file with traling .webp, which, in case of this example, leads to jpg.webp. – gf_ Oct 7 '19 at 19:25
  • @gf_ ok you helped me a bit, I changed the part to try_files $uri$webp_suffix $uri =404; and now mainfoto.jpg.webp works. However, my original goal is to get from mainfoto.jpg to mainfoto.webp. How would I do this then? – Philipp Mochine Oct 7 '19 at 20:09
3

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;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.