Proper webp redirect

yazzou

Hello
I know that Wo nginx config is supposed to support webp out of the box. But i have some difficulty to see it working on the wp site hosted on my server.
I have installed graphicsmagick and convert my images from pngto webp format like this

gm convert /var/www/exemple.com/htdocs/wp-content/uploads/2020/10/my-img.png /var/www/exemple.com/htdocs/wp-content/uploads/2020/10/my-img.webp

i have checked that my webp image exists in the target folder. It is half size.

I have loaded my site checked my network tab in the chrome console. The type column is still telling me that my image is png.

I have then tried to add a custom nginx config in the sites directory

/var/www/exemple.com/conf/nginx/mycustomconfig.conf

I have inserted the following lines in it :

location ~* ^/wp-content/.+\.(png|jpg)$ {
add_header Vary Accept;
try_files $uri$webp_suffix $uri =404;
}

file and restarted nginx
Nothing different.
UPDATE
I am using cloudflare free as cdn and found this
https://community.cloudflare.com/t/cloudflare-cdn-cache-to-support-http-vary-header/160802/13
Maybe this is why i am facing the issue

portofacil

That's because you are converting img.png to img.webp. The proper way is creating an alternative image while keeping the original for the devices incapable of dealing with webp:

img.png -> img.png.webp

Both images must exist, and Nginx will transparently rewrite them internally for the browsers which can take advantage of webp. You don't need any extra rules, WO does it automatically, out of the box.

phantomxxx

portofacil Dear porto, you know why Google Speed Insights doesn't detect WEBP even when there are the images created by EWWW and chrome browser detects them as image/WEBP, is there a way to add Chrome-lighthouse UserAgent?

yazzou

Ok thanks. I have done that and it is working

portofacil

phantomxxx I have no idea! 🙁

phantomxxx

portofacil Thanks for the answer, maybe you know how Wordops detects compatible browsers to serve WEBP?
I already get the file that does the replacement "WPCOMMON-PHP7x", in line:
try_files $uri$avif_suffix $uri$webp_suffix $uri =404;
How it detects the browser support?
Maybe if i get the mechanism i can fix adding Chrome-lighthouse USERAGENT. And solve SCORE problem for many WordOps Users.

portofacil

It's not based on user-agent detection, but in an HTTP header (accept if memory serves).

The browser announces its support to webp with something like accept: br, and that's what Nginx detects to decide if it should rewrite the image to the webp version.

EDIT: br is for brotli support; WEBP should be accept: webp, but the idea is the same.

This is the correct approach to the issue, IMHO. Hacking it into "detecting" Lighthouse user-agent not only won't be efficient as might deliver to other unwanted behaviours.

Finally, AFAIK Lighthouse uses several user-agents depending on the environment it wants to test/measure.

phantomxxx

portofacil Thanks for your answer again, that explains a lot.