image-set() 仅适用于 css background-image，不支持 标签；需兼容写法（-webkit 前置）、路径加引号、单位用 x、构建工具需手动处理路径，否则高分屏仍模糊。
image-set() 不能直接解决模糊问题，它只在特定条件下生效——用错场景、写错顺序、漏掉 fallback，结果就是图片更糊，甚至不显示。
background-image: image-set() 只对 CSS 背景图有效
它完全不适用于 <img> 标签。如果你给 <img src="logo.png"> 写了 image-set()，浏览器直接无视。这类需求必须用 srcset + sizes，比如：<img src="logo@1x.png" srcset="logo@1x.png 1x, logo@2x.png 2x, logo@3x.png 3x">。强行在 <img> 上套 image-set() 是常见误解，DevTools 里根本看不到任何效果。
Firefox 和旧版 Safari 会跳过整条声明
Firefox（截至 v128）解析到 image-set() 就直接丢弃整行 background-image 声明，不是降级，是彻底失效。Safari 16.4 之前只认 -webkit-image-set()。所以必须按固定顺序写两遍：
background-image: url("logo@1x.png");
background-image: -webkit-image-set(url("logo@1x.png") 1x, url("logo@2x.png") 2x);
background-image: image-set(url("logo@1x.png") 1x, url("logo@2x.png") 2x);
-
-webkit-版本必须在image-set()之前，否则 Safari 16.4+ 可能忽略 - 1x 项不能省略，否则旧 Safari 整条丢弃
- 所有路径必须加引号，尤其含
@符号时（如"logo@2x.png"） - 单位必须带
x，写成1x，不能是1或1.0x
构建工具不处理 image-set 中的路径
Vite、Webpack 默认不会扫描 image-set() 里的 url()，如果 "logo@2x.png" 没被真正复制进 dist 目录，运行时就是 404，浏览器 fallback 到 1x 图，高分屏照样糊。验证方式很简单：
- 打开 DevTools → Elements → Styles 面板，看
background-image行是否被划掉 - Console 搜
parse或image-set，有报错基本就是路径或语法问题 - Network 面板确认
logo@2x.png确实返回 200
更隐蔽的问题是：即使路径存在，若容器没有显式宽高，或 background-size 缺失/设为 auto，高清图加载后仍会被拉伸，视觉上还是糊。
移动端 WebView 和缩放状态下容易失效
安卓 X5 内核、鸿蒙 WebView 多数只支持 -webkit-image-set()，且要求路径为绝对路径、单位必须用 dppx（2dppx），不能用 device-pixel-ratio。Safari 在页面 zoom ≠ 100% 时 DPR 判定失准，可能选错图。这些环境没法靠 image-set() 自动兜底，得配合媒体查询做二次判断，比如：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.logo { background-image: url("logo@2x.png"); }
}
真正难的不是写对语法，而是让每张 @2x 图在构建产物中真实存在、路径可访问、尺寸匹配容器、且不被缩放干扰——这几个条件缺一不可，漏一个就糊。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
