That solution looks perfect, is there a reason it doesn’t work for you?
I did make an attempt. I can see the test image in the plugin admin, but no webp images on the front end (using Chrome).
I’m not an Nginx expert, so I wanted to see if it had been done before and if there was a readily available solution.
This is what I did:
- Added “image/webp webp” to /etc/nginx/mime.types
- Added
`map $http_accept $webp_suffix {
default “”;
“~*webp” “.webp”;
}` to my main /etc/nginx/nginx.conf
- Added
` location ~* ^/wp-content/.+\.(png|jpg)$ {
# root // commented out;
add_header Vary Accept;
try_files $uri$webp_suffix $uri =404;
}` to the server block for the site.
- Restarted nginx
The site is http://www.pekoe.se.
If the test image works, then it is working. The urls on the front-end will look like they are the png/jpg images, but they are the webp versions. At least that is how it looks in Apache as well. The test image is the only way I know currently to verify this. There is probably some testing site you can run it through to verify it otherwise.
Yes, you’re right! When I inspect the image in Chrome dev tools I see a MIME type of image/webp, while in Firefox it’s image/jpeg (and more than double the file size).
Thanks for quick help and a great plugin!
Hello.
I had the same issue, and solved with the following code:
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;
}
}
Instead of rewriting the image (what causes issues with my cache configuration) I made my choice for a redirect. If visitor’s browser supports webp, and an image .webp with the same name exists, then the redirection occurs.
If you can read in Portuguese, in my blog I explain the hack I had to use in order to make multiple conditionals on Nginx.
http://janio.sarmento.org/hackeando-o-nginx-condicionais-multiplas.html
