I'm using .htaccess to serve webp images to browsers that support it.
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
RewriteRule (.+)\.(jpe?g|png|gif)$ $1.webp [T=image/webp,E=REQUEST_image]
Header append Vary Accept env=REQUEST_image
AddType image/webp .webp
Source: WebP images with htaccess
Basically what it does is return a .webp image instead of the requested jpg/png/gif, from the same location, if it exists and is supported.
This works fine in Chrome, Firefox, IE11, Edge... Haven't tested Safari.
My issue is however that when I right click on the website, "save as", it automatically selects a .jpg version. If a .jpg version doesn't exist it tries to save the whole html. Intended behaviour would be for it to save the displayed .webp version, if it is used. Weirdly enough it does try to save the .webp in Firefox when doing the same, but when I try the same thing using Page info in Firefox (ctrl+i on Windows), it selects the .jpg.
How is this even possible? Is there something missing/wrong with this?
I checked that the displayed image is an actual webp, and it is. Both content-type and file size matches that of the webp.
my working solution is:
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{DOCUMENT_ROOT}/%{REQUEST_URI} -f
RewriteRule (.+)\.(jpe?g|png|gif)$ $1.webp [T=image/webp,E=REQUEST_image]
so try to change RewriteCond %{DOCUMENT_ROOT}/$1.webp -f to
RewriteCond %{DOCUMENT_ROOT}/%{REQUEST_URI} -f
Tested on Safari and Firefox.