Webinoly is just the perfect tool for NGINX experts. Give it a try!
+4 votes
2.3k views
by Rookie

I'm trying to implement WebP on my WordPress installation. WebP images are generated using ShortPixel and I'm following their documentation to configure serving of WebP through Nginx. https://shortpixel.helpscoutdocs.com/article/111-configure-nginx-to-transparently-serve-webp-files-when-supported.

Basically what I did is, in /etc/nginx/sites-available/site.com at the start I added

map $http_accept $webp_suffix {

        default "";

        "~*webp" ".webp";

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #000000} span.s1 {font-variant-ligatures: no-common-ligatures}

}

and in /var/www/site.com/*-nginx.conf  I added this piece of code.

location ~* ^(/wp-content/.+)\.(png|jpe?g)$ {

        # WebP

        set $base $1;

        set $webp_uri $base$webp_suffix;

        set $root "/var/www/site.com/htdocs";

        root $root;

        add_header Vary Accept;

        if ( !-f $root$webp_uri ) {

                add_header X_WebP_SP_Miss $root$webp_uri;

        }

        try_files $webp_uri $uri =404;

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #000000} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #38b9c7} span.s1 {font-variant-ligatures: no-common-ligatures}

}

Problem: It is not working. Please let me know if there is something I'm doing wrong. Any help will be appreciated. Thanks

by Rookie
have you resolved this problem? I have same condition.
by Rookie
I found a solution, you can check my answer in this thread.
by Expert

WordPress 5.8 will be released next month (July) with native support for WebP. So you don't need all these custom Nginx rules now!

by Rookie
Wordpress 5.8 is only adding support to directly upload webp images to the Media Gallery. This does not solve the problem of conditionally serving webp only to browsers that support it and serving jpg/png to browsers that don't support webp. There are other methods, such as using the <picture> tag with a fallback <img> that some plugins can do for you. However, I think the best method is the one we are discussing here.

Recommended reading if you want to learn more about webp and the different ways of serving it.

https://developers.google.com/speed/webp/faq

What we are discussing here is the first method in the above article "Server-side content negotiation via Accept headers".

1 Answer

0 votes
by Rookie

I know this thread is 2 years old but I just set this up myself so I will share my solution here.

First edit the /etc/nginx/nginx.conf file and add the following code anywhere inside of the http{} block.

map $http_accept $webp_suffix {

  default "";

  "~*webp" ".webp";

}

You have to edit the /etc/nginx/nginx.conf file directly because this must be in the http{} block, not the server {} block.

Next edit the /etc/nginx/common/locations.conf file.

Add the following block nested inside of the location block that starts with location ~* \.(ogg|ogv|svg....

location ~* ^.+\.(png|jpe?g)$ {

  add_header Vary Accept;

  try_files $uri$webp_suffix $uri =404;

}

In the end the nested block should look like this.

location ~* \.(ogg|ogv|svg|svgz|eot|otf|woff|mp4|ttf|css|rss|atom|js|jpg|jpeg|gif|png|ico|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf|swf|woff2|m4a|c>

        include common/headers-http.conf;

        include common/headers-https.conf;

        add_header "Access-Control-Allow-Origin" "*";

        access_log off;

        log_not_found off;

        expires max;

        location ~* ^.+\.(png|jpe?g)$ {

                add_header Vary Accept;

                try_files $uri$webp_suffix $uri =404;

        }

}

You have to edit the /etc/nginx/locations.conf file directly because there is already a location block in there that will match png/jpg files and you can't match 2 locations blocks.

Keep in mind that both /etc/nginx/nginx.conf and /etc/nginx/locations.conf files could get overwritten in the future if you update Webinoly.

Also, if you are using a CDN you will need to manually invalidate the cache because the http old http response headers without the vary: accept header will be cached.

Welcome to the Community site for Webinoly.

Our Optimized LEMP Web Server is a powerful set of commands for doing just about anything you could wish.

With Webinoly you can set up your NGINX web server in just one step.

* * * * * * *

To report a bug, please create a new issue on GitHub or ask a question here with the bug tag.
Webinoly Support Paypal Donations

PayPal · GitHub Sponsors · Bitcoin

It is very important that any visitor to the site read the disclaimer, terms of use and privacy and legal statement before start browsing.

...