如何修复WordPress网站因.htaccess规则导致非WebP兼容浏览器图片破损问题？

你的问题出在当前的.htaccess规则逻辑上：第二条规则仅通过User-Agent判断iOS Safari版本大于13就添加webp缓存标识，没有验证浏览器是否真的支持WebP格式。部分iOS 14及以下的Safari版本（或特殊场景下）其实不支持WebP，这就导致缓存系统给这些浏览器返回了WebP格式的图片，最终显示破损。

修改后的.htaccess规则 #

# 当浏览器明确支持WebP时，添加webp缓存标识
RewriteCond %{HTTP_ACCEPT} "image/webp"
RewriteRule .* - [E=Cache-Control:vary=%{ENV:LSCACHE_VARY_VALUE}+webp]

# iOS Safari版本>13且支持WebP时，才添加webp缓存标识
RewriteCond %{HTTP_USER_AGENT} iPhone.*Version/(\d{2}).*Safari
RewriteCond %1 >13
RewriteCond %{HTTP_ACCEPT} "image/webp"
RewriteRule .* - [E=Cache-Control:vary=%{ENV:LSCACHE_VARY_VALUE}+webp]

修改说明 #

在第二条规则中新增了RewriteCond %{HTTP_ACCEPT} "image/webp"条件，确保只有同时满足「iOS Safari版本大于13」和「浏览器支持WebP」两个条件时，才会标记缓存为WebP版本。这样就能彻底避免给不支持WebP的浏览器返回错误格式的图片。

修改完成后，记得清空你的LSCache缓存，让新规则立即生效。

内容的提问来源于stack exchange，提问作者XVersi