I‘m using the rewrite mod in .htaccess to load .webp images for browsers which supports it and for the ones which doesn‘t is uses .jpg, however when cloudflare is enabled it is messed up. What I know so far is that when I turn on developer mode everything works fine (as the caching is disabled). When I purge everything then when the first browser connects, let‘s say chrome then it caches the .webp file and for every other browser it will only show that one, which is quite a bit of problem as safari can‘t display it. On the other hand if safari connects first, it caches the .jpg file which in this case kills the whole purpose of this. I also use this to load different sized pictures for mobile devices.
Here is the code I use:
<IfModule mod_setenvif.c>
SetEnvIf Request_URI "\.(jpe?g|png)$" REQUEST_image
</IfModule>
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp]
</IfModule>
<IfModule mod_mime.c>
AddType image/webp .webp
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REQUEST_image
</IfModule>
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} "(android|blackberry|googlebot-mobile|ipad|iemobile|iphone|ipod|palmos|webos)" [NC]
RewriteRule "^desktop/(.*)$" "/mobile/$1" [L]
</IfModule>