右击“另存为”选择jpg图片而不是webp，但是显示的是webp

Question

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.

Answer 1

my working solution is:

---

Check if browser supports WebP images

RewriteCond %{HTTP_ACCEPT} image/webp

Check if WebP replacement image exists

RewriteCond %{DOCUMENT_ROOT}/%{REQUEST_URI} -f

Serve WebP image instead

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.