Firefox v128和旧版Safari必须加-webkit前缀，因前者完全不解析image-set()，后者静默丢弃高倍率条目；-webkit-image-set()须前置、引号统一、单位一致（仅1x/2x/3x），安卓WebView和X5内核仅认该前缀且要求路径真实存在、background-size显式设置。
Firefox 和旧版 Safari 为什么必须加 -webkit 前缀？
因为 image-set() 在 Firefox v128（2026 年 6 月）仍完全不解析该函数，既不降级也不报错，而是整行跳过；Safari 15.0–15.3 虽返回 @supports 为 true，但会静默丢弃 2x/3x 条目。只有加 -webkit-image-set() 才能被这些浏览器识别——这不是“可选优化”，是生效前提。
前缀写法必须满足的三个硬性条件
-
-webkit-image-set()必须写在标准image-set()之前，否则 Safari 16.4+ 可能漏掉 1x 项 - 三行中所有
url()的引号类型要统一（全用"或全用'），路径含@或空格时必须加引号，如url("icon@2x.png") - 每条声明里的单位必须一致：只允许
1x、2x、3x，混用dppx或w描述符会导致整条失效
安卓 WebView 和微信 X5 内核怎么处理前缀？
多数安卓 WebView（包括微信 X5）只认 -webkit-image-set()，且要求：
- 路径必须是绝对路径或构建后真实存在的相对路径（Vite/Webpack 不会自动处理
image-set()中的资源引用） -
background-size必须显式设置，比如background-size: 24px 24px，否则 @2x 图按物理尺寸渲染，会撑大容器 - 不能依赖
cover或contain自动缩放——不同 DPR 下缩放比例不一致，关键区域容易裁切错位
为什么写了 -webkit 前缀还是没效果？
常见静默失败原因：
- DevTools Styles 面板里整行
background-image: -webkit-image-set(...)被划掉 → 检查是否漏了url()外层括号，或逗号后多空格 - Network 面板看不到
icon@2x.png请求 → 构建产物中该文件根本不存在，404 后不会 fallback 到 1x，而是留白 - 伪元素（
::before/::after）没显示 → 忘了设content: ""和显式宽高，背景图无渲染区域
前缀不是补丁，是兼容链上不可跳过的一环；漏掉任意一个细节，高清图就永远加载不上。
立即学习“前端免费学习笔记（深入）”；
