Configure Nginx to serve WEBP images?

Question

I am using ShortPixel to create WEBP images, with named image.webp and are saved in the same folder as image.jpg.

I added this in etc/nginx/conf.d/webp.conf:

map $http_accept $webp_suffix {
    default "";
    "~*webp" ".webp";
}

and added include etc/nginx/conf.d/*.conf in nginx configuration file.

Added this in etc/nginx/conf.d/site.conf

location ~* ^(/wp-content/.+)\.(png|jpe?g)$ {
    set $base $1;
    set $webp_uri $base$webp_suffix;
    set $webp_old_uri $base.$2$webp_suffix;
    set $root "FULL PATH OF wp-content PARENT";
    root $root;
    add_header Vary Accept;
    if ( !-f $root$webp_uri ) {
        add_header X_WebP_SP_Miss $root$webp_uri;
    }
    try_files $webp_uri $webp_old_uri $uri =404;
}

Check with nginx -t, everything correctly. However in devtool/network tab, images type still jpg. Why is that?

score 1 · Answer 1 · answered Jul 12 '21 at 20:07

Not sure how Shortpixel's logic works exactly, but if it is intercepting the GET requests from the client, you'll probably see the original file type in the network log in dev tools.

Check the the response headers, if you see content-type: image/webp then you'll know it's working.

Also, did you add the webp images to the folder manually? If so, try removing them and re-doing the Shortpixel process. I'm fairly certain that Shortpixel automatically converts and adds the images itself.

In fact, after looking for a second, you shouldn't have to touch the shell to use Shortpixel. It's ostensibly designed for non-technical users.

If you're still stuck check these:

API key is active/implemented correctly?
MIME conflicts with Wordpress
Content Security Policy

Lastly, Shortpixel is a paid service. Their customer support should absolutely be handling this. If they're not, dump them. There are many lighter weight approaches to serving WebP images, anyways.

Hopefully this helps others with the problem.

Configure Nginx to serve WEBP images?

1 Answers1