WebP-images-with-htaccess
WebP-images-with-htaccess copied to clipboard
Right click, "save as" selects a .jpg file?
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.
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!
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?
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.
Alright, good to know it's not just me!
I'll let you know if I figure something out myself.
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?
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?
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.
@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.