如何仅用HTML/CSS实现旧版Safari background-image的webp兼容PNG降级

可行实现方案 #

方案1：CSS声明顺序兜底（最稳妥，无叠加风险） #

利用浏览器忽略不支持属性值的特性，先写PNG格式的兜底声明，再写WebP格式的优先级声明：

.target-element {
  /* 旧版Safari不支持WebP时会忽略下一行声明，直接用这行的PNG资源 */
  background-image: url("./image.png");
  /* 支持WebP的浏览器会优先应用靠后的同属性声明 */
  background-image: url("./image.webp");
}

原理：当浏览器解析到不支持的图像格式对应的background-image声明时，会直接丢弃整条规则，不会覆盖前一条兼容格式的声明，完全不需要额外的特性检测逻辑。

方案2：多背景图自动降级 #

利用CSS多背景图的加载逻辑，按优先级排列资源，浏览器会自动降级到第一个可加载的资源：

.target-element {
  /* 先尝试加载WebP，加载失败/格式不支持时自动使用后面的PNG */
  background-image: url("./image.webp"), url("./image.png");
}

注意：如果你的WebP资源包含透明通道，且需要避免两层图片叠加显示的问题，优先使用方案1。

注意事项 #

需要确保服务端配置了正确的WebP资源MIME类型image/webp，避免浏览器因格式识别异常触发降级逻辑。

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