Webp Support

v3
#1

Hi,

My WP on a server with PHP7 Redis Cache and Let’s Encrypt setup (EE).

I am trying to implement webp on nginx but it seems none of the guides on the internet have worked for me. I have converted all my png and jpeg files, e.g. example.jpg and example.webp is both on uploads folder.

Is there anyway to do this or am I missing something like there is no support?

#2

Try this:

location ~* ^/.+\.(png|jpg|jpeg)$ {  
  set $red Z;

  if ($http_accept ~* "webp")    {
    set $red A;
  }
  if (-f $request_filename.webp) {
    set $red "${red}B";
  }

  if ($red = "AB") {
      add_header Vary Accept;
      rewrite (.*) $1.webp redirect;
  }
}

There’s a lot of if and certainly it will be possible to rewrite the snippet on a more elegant way (with try_files or something).

#3

Thank you portofacil.

I have added it to /etc/nginx/sites-enabled/example.com configuration but didn’t work.

Previously I have adapted this guide here: https://centminmod.com/webp/ and here: https://matteth.wordpress.com/2014/09/29/serving-webp-images-in-wordpress-with-nginx/, also some other similar ones.

I have double checked mime types on nginx and php info that they support webp.

I have Autoptimize plugin as well. After reloading nginx I purged all cache from Redis, Autoptimize, Nginx Helper.

Any other suggestion?

#4

Paste the contents of your vhost file, please.

The snippet I provided is in use by 20+ sites of mine, and it works for me. Let me take a look at your vhost, in order to see if something rings the bell.

#5

Here you are:

server {


    server_name example.com   www.example.com;


    access_log /var/log/nginx/example.com.access.log rt_cache_redis;
    error_log /var/log/nginx/example.com.error.log;


    root /var/www/example.com/htdocs;

    location ~* ^/.+\.(png|jpg|jpeg)$ {  
  		set $red Z;

  	if ($http_accept ~* "webp")    {
    	set $red A;
 			}
  
  	if (-f $request_filename.webp) {
    set $red "${red}B";
  			}

  	if ($red = "AB") {
      add_header Vary Accept;
      rewrite (.*) $1.webp redirect;
  			}
	}
    
    

    index index.php index.html index.htm;


    include  common/redis-php7.conf; 
    
    include common/wpcommon-php7.conf;
    include common/locations-php7.conf;
    include /var/www/example.com/conf/nginx/*.conf;
}
#6

Any ideas?

#7