当浏览器支持格式时，我尝试将来自服务器的图像作为webp提供；如果不支持，则提供jpg。 我在互联网上找到这样的文章，并以.htaccess从所有jpg和png文件重定向到webp：
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_URI} (?i)(.*)(\.jpe?g|\.png)$
RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1\.webp [L,T=image/webp,R]
...
在我开始将Cloudflare（免费计划）用于缓存之前，它一直运行良好。现在它也可以使用，但是只有在有人使用不支持webp的浏览器（例如Internet Explorer）加载网站之前，该功能才可以使用。之后，该Cloudflare将该图像缓存为.jpg，并且重定向不再触发。
例如我有图像
example.com/img.jpg和example.com/img.webp。到达并打开用户打开的网站example.com/img.jpg时，或者如果支持格式，则重定向到example.com/img.webp。当有人使用IE example.com/img.jpg到达站点时，CF将其作为图像进行服务并缓存。之后，无法在其他浏览器上重定向到webp。
我目前发现的唯一解决方案是将htaccess更改为
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_URI} (?i)(.*)(\.jpe?g|\.png)$
RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1\.webp [L,T=image/webp,R]
RewriteCond %{REQUEST_URI} (?i)(.*)(\.jpe?g|\.png)$
RewriteCond %{QUERY_STRING} !^old$ [NC]
RewriteRule ^ %{REQUEST_URI}?old [L,QSA,R]
现在
example.com/img.jpg-始终重定向302，从不缓存
example.com/img.jpg?old-缓存的jpg
example.com/img.webp-缓存的Webp
它可以工作，但是我可以重定向所有图像，所以它很笨拙，效率不高...
我不能简单地使用<picture>，因为我正在用js预加载图像。当不支持webp时，也许有跨浏览器的方式可以使用js预先加载webp并回退到jpg？
P.S。我知道CF PRO会自动为webp服务，但是我只想稍微浏览一下CF，我不想每月支付20美元