必须先写 url() 降级，再写 image-set() 覆盖，且仅支持 1x/2x 等密度描述符；firefox 完全不支持，需用 @supports 隔离，否则回退到上一条 url()。
image-set() 在 CSS 里怎么写才不被忽略
浏览器只在支持 image-set() 的环境下才启用它，Chrome 21+、Safari 6.1+、Edge 17+ 支持，Firefox 直到 2024 年仍**完全不支持**（连实验性 flag 都没开）。所以直接写 background-image: image-set(...) 而不配 fallback，等于对 Firefox 用户展示空白或默认色块。
必须用渐进增强方式：先写普通 url()，再覆盖 image-set()，且顺序不能错：
div {
background-image: url("photo-small.jpg"); /* 低 DPI fallback */
background-image: image-set(
"photo-small.jpg" 1x,
"photo-large.jpg" 2x,
"photo-4k.jpg" 3x
);
}-
image-set()必须写在普通url()之后，否则不生效（CSS 层叠规则） - 每个资源后必须跟
1x/2x等密度描述符，不能省略单位 - 路径必须是相对或绝对 URL，不能是变量或 CSS 自定义属性（
var(--img)会直接失效）
为什么 background-image 用 image-set 比 srcset 更可控
srcset 是 HTML 属性，由浏览器根据视口宽度 + 设备像素比 + 网络条件综合决策，开发者无法干预加载时机；而 image-set() 是纯 CSS 声明，只依赖设备像素比（dppx），响应更确定，适合背景图这类“非内容性图像”。
典型适用场景：按钮悬停态、卡片装饰图、伪元素遮罩 —— 这些图不参与语义，也不需 SEO，但对清晰度敏感。
立即学习“前端免费学习笔记（深入）”；
- 不适用于
<img alt="CSS如何优化响应式设计中的图像渲染_利用image-set根据DPI选择css资源" >标签（HTML 不认这个 CSS 函数） - 不能配合
media查询动态切换（比如“横屏用 A，竖屏用 B”），它只看dppx - 若服务器未开启缓存或 CDN 未正确设置
Vary: DPR，高倍图可能被低倍缓存覆盖，导致模糊
常见报错：Failed to load resource 和 “Invalid property value”
控制台出现 Failed to load resource 但路径明明存在？大概率是 image-set() 里某个资源 404，浏览器会静默跳过整个函数，回退到上一条 url() —— 你以为它在加载高清图，其实一直在用 1x 版本。
Invalid property value 则多因语法错误：
- 漏掉逗号，如
"a.jpg" 1x "b.jpg" 2x→ 必须写成"a.jpg" 1x, "b.jpg" 2x - 用了单引号混双引号（部分旧版 Safari 对引号敏感）→ 统一用双引号
- 写了
1.5x这种非整数倍（Safari 仅支持1x/2x，Chrome 支持1.5x/3x等，但兼容性差）→ 保守起见只用1x和2x
替代方案：当 image-set 不可用时怎么保底
Firefox 用户占全球桌面流量约 5%，不能靠 JS 检测后动态注入样式（太慢，闪屏明显）。更稳的做法是用 @supports 隔离：
@supports (background-image: image-set("a.jpg" 1x)) {
.hero { background-image: image-set(...); }
}
/* 所有浏览器都走这里 */
.hero { background-image: url("photo-2x.jpg"); }注意：@supports 检测的是函数语法支持，不是实际渲染能力。如果图本身太大没压缩，即使语法合法，移动端仍可能卡顿或触发内存回收。
- 别指望
image-set()自动适配网络状况 —— 它不读取Save-Data头，也不降级 - WebP/AVIF 格式目前不能直接塞进
image-set()（语法上允许，但 Safari 16.4 前不识别 WebP 描述符）→ 优先用 JPG/PNG 保底 - 真正难处理的是“同一张图在不同 DPR 下需不同裁剪”，
image-set()无能为力，得切图 +picture+media组合
最麻烦的不是语法，而是你得同时维护三套图资源、三套命名规则、三套 CDN 缓存策略，稍一疏忽，2x 图就跑到了 1x 用户手机上，白占带宽。
