如何在不使用JavaScript的情况下用image-set实现背景图降级？

正确解决方案 #

使用带type()标识的标准image-set语法，配合基础的PNG降级，既能让支持AVIF的浏览器加载AVIF图，不支持的加载PNG，且仅加载选中的那张图：

/* 降级方案：不支持image-set的浏览器直接用PNG */
background-image: url("/static/img/image.png");
/* 支持image-set的浏览器，根据格式兼容性自动选择 */
background-image: image-set(
  url("/static/img/image.avif") type("image/avif") 1x,
  url("/static/img/image.png") type("image/png") 1x
);

你的尝试失败原因分析 #

1. 尝试1：使用旧的-webkit-image-set语法，iOS Safari对该语法的AVIF支持存在兼容性问题，且没有明确的格式标识，导致无法正确降级到PNG，出现灰色占位。
2. 尝试2：未添加type()指定图片格式，浏览器无法准确判断哪种格式是它支持的最优选项，因此可能默认选择了兼容性更稳妥的PNG。
3. 尝试3：将基础降级的background-image设为AVIF，旧版iOS Safari不支持AVIF格式，无法加载图片，所以显示灰色背景。

兼容性验证 #

• Chrome 107.0+、Firefox 106.0+：支持带type()的image-set，会优先加载AVIF。
• iOS 16.1+：支持AVIF和标准image-set，加载AVIF；旧版iOS不支持AVIF，会自动选择PNG。
• 所有浏览器仅会加载自身支持的那张图片，不会冗余加载两种格式，避免影响页面加载速度。

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