Right click, "save as" selects a .jpg file?

[dansan92]

I'm not sure if this is on my end only, but when using Chrome, right click on image, "save as", it tries to save a .jpg version even when a .webp version is displayed? This also happens in for example Firefox when using the Page info (ctrl+i on Windows) and save image button.

[vincentorback]

Hey @dansan92!

Yes this is sort of how it is, because we are not changing the html which I think is what the save as goes for.
I don’t think we can do much from an .htaccess file to fix this, but if you find a way please let me know!

[dansan92]

I can't say for sure, but I don't think it has anything to do with the html.

For example, if I point the requested image to a script that generates the webp image instead, then the "save as" works. Like:
RewriteRule (.*) assets/php/images.php?src=$1

And the code being something as simple as:
header("Content-Type: image/webp"); readfile($_GET['src']);

In both cases the html looks the same, showing the the .jpg/png/gif in the img tag, but in this example the "save as" knows it is a webp.

I would imagine there being no client side difference between these two solutions, other than maybe some headers being different. I can't say, I don't know enough about this.

Are you getting the same issue though, with the "save as" selecting the jpg?

[vincentorback]

Yeah you're right. Im getting a image.jpg in Chrome, a image.jpg.webp in Safari and a image.webp in Firefox when I try to save the left image on https://webp.vincentorback.se.

I don't know enough about this either, but I will look into it when I have the time to see if I can change the outcome in any of the browsers.

[dansan92]

Alright, good to know it's not just me!

I'll let you know if I figure something out myself.

[dansan92]

Okay, so... I figured out the cause of this.
Chrome will save as .webp if I remove Accept from the Vary header.

I believe the Vary header determines how cache handles the resources, and in this case based on the Accept request header?
If I remove it, would it not cache the images properly?

[dansan92]

Correct me if I'm wrong, but this part doesn't seem to work:

<IfModule mod_headers.c>
# Vary: Accept for all the requests to jpeg, png and gif
Header append Vary Accept env=REQUEST_image
</IfModule>

For me, REQUEST_image is always false, even if you set it in the RewriteRule.

You could easily test it with this:
Header append Vary Test env=!REQUEST_image
Which for me appends vary test for all browsers and files.

Is the intention to only add Vary Accept to the webp files? In that case, this works:
RewriteEngine on
RewriteCond %{REQUEST_URI} \.webp$
RewriteRule (.*) - [T=image/webp,E=REQUEST_image]
Header append Vary Accept env=REQUEST_image

Also, is there a reason to use both T=image/webp and AddType? According to the specs, T= has the same effect as AddType.
Won't it set this automatically anyway, or?

[jamacoe]

I have no clue about rewrite rules. I found your code (one of very few results when searching for Apache configuration regarding image content negotiation), and I blindly copied it. Didn't work. Only after hours of testing and further research, I realized that I had to change one line to RewriteCond %{DOCUMENT_ROOT}/images/$1.webp -f in order to make it run. Hence, my images are in /images, not root. So the usage description is not accurate: "Place the following in your .htaccess file and jpg/png/gif images will be replaced with WebP images if found in the same folder." That's only true for the root directory.

[vincentorback]

@jamacoe I wish me from 9 years ago could help me out but, I really don’t have a clue about rewrite rules anymore :)
I will try to fiddle with the code in a couple of days when I have some time and see if I can get this sorted.