Remove duplicate extension on file with .htaccess - .htaccess

Question

I've been playing around with .htaccess to try and rewrite images for a specific browser (Safari).
I have images uploaded that are named like: myimage.png.webp and would like to have the .webp removed leaving the myimage.png so that the <img> tags point to a duplicate file that isn't a WebP.
This is what I tried patching together so far, but it just resulted in a 500 Error and I'm getting myself confused with the rules now. Can anyone help?
#RewriteCond %{HTTP_USER_AGENT} Safari
# check if an image was requested
#RewriteCond %{REQUEST_FILENAME} .(jpe?g|gif|bmp|png|svg).webp -f
#RewriteRule ^.*/uploads/(.*).(svg|png|jpe?g|gif|bmp).webp$ https://%{HTTP_HOST}/uploads/$1.$2 [L,R=302]

Answer 1

Your directives appear to do the opposite of what you're trying to do, as if you were linking to the myimage.png.webp file and externally redirecting to the myimage.png file?
I assume you are already linking to the myimage.png file (as stated). We then need to do some feature sniffing to make sure that the browser can support webp files (and that the .webp file actually exists) before rewriting the request.
For example:
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{DOCUMENT_ROOT}/$1.$2.webp -f
RewriteRule (.+)\.(png|jpe?g|gif)$ /$1.$2.webp [T=image/webp,L]
The T flag ensures we send back the appropriate mime-type for the webp response.
UPDATE: It seems you are actually linking to the .webp image and wish to rewrite the corresponding png/jpg/gif when webp is not supported (ie. Safari)...
# Rewrite images to WebP if they exist
RewriteCond %{HTTP_USER_AGENT} Safari
RewriteCond %{DOCUMENT_ROOT}/$1.$2.webp -f
RewriteRule (.*).(png|jpe?g|gif).webp$ $1.$2 [T=image/$2,L]
This isn't strictly correct:
Safari isn't the only browser that doesn't support webp images. Notably, there is IE11 (which still has a reasonable market share, certainly comparible to Safari in some demographics) and other minor browsers (eg. KaiOS). By checking the user-agent, you need to also update the rule when these browsers do support webp images. It is therefore preferable to instead test whether the browser actually supports image/webp images (or not) by checking the Accept HTTP request header.
The 2nd condition is checking whether the .webp image exists, before rewriting to the non-webp image. Presumably you want to check that the non-webp image exists (or remove this condition altogether - since the request will presumably "fail" anyway if the user-agent does not support webp images).
The returned mime-type will be incorrect if your images are .jpg (as opposed to .jpeg) since image/jpeg is the correct mime-type, not image/jpg. This is harder to fix, unless you split this into its own rule.
Try the following instead:
# Rewrite images to non-WebP if webp are not supported and they exist
RewriteCond %{HTTP_ACCEPT} !image/webp
RewriteCond %{DOCUMENT_ROOT}/$1.$2 -f
RewriteCond $2#jpeg ^jpe?g#(.+)|(.+)#
RewriteRule (.+)\.(png|jpe?g|gif)\.webp$ $1.$2 [T=image/%1%2,L]
The (rather cryptic) 3rd condition extracts the required mime-type "part": png, jpeg or gif respectively, regardless of whether .jpg or .jpeg is requested. These are saved in the %1 and %2 backreferences. Note that these are mutually exclusive. Either %1 holds jpeg (and %2 is empty), OR %2 holds png or gif (and %1 is empty). So together they form the correct response.
Note that literal dots in the RewriteCond TestString don't need to be escaped, since this is an "ordinary" string. However, the literal dots in the RewriteRule pattern do need to be backslash escaped since this is a regex.

Answer 2

You may try this rule in your site root .htaccess:
RewriteCond %{HTTP_USER_AGENT} Safari
RewriteCond %{REQUEST_FILENAME}.webp -f
RewriteRule ^.+\.(?:svg|png|jpe?g|gif|bmp)$ $0.webp [L,NC]

Answer 3

I managed to get it working the way I need, and with a bit of help from the other two answers, my htaccess rule is doing what I expect:
# Rewrite images to WebP if they exist
RewriteCond %{HTTP_USER_AGENT} Safari
RewriteCond %{DOCUMENT_ROOT}/$1.$2.webp -f
RewriteRule (.*).(png|jpe?g|gif).webp$ $1.$2 [T=image/$2,L]
So this will take an image URL like this:
https://example.com/uploads/test.png.webp and swap it to a fallback duplicate image on Safari/iOS (where webp still isn't supported), and output to the browser: https://example.com/uploads/test.png