image-set()不能替代srcset，因其仅支持CSS background-image、缺乏语义性与可访问性、浏览器兼容性差、不支持sizes响应式断点且无法降级；srcset+sizes才是主流可靠方案。
image-set() 在实际项目中基本不可用，浏览器支持太差——Chrome 仅从 89 版起部分支持（且需 background-image 场景），Firefox 一直不支持，Safari 完全无视。别把它当响应式图片的正解，它连 srcset 的零头都比不上。
为什么 image-set() 不能替代 srcset
image-set() 是 CSS 函数，只能用于 background-image，无法作用于 <img alt="CSS如何实现响应式图片根据分辨率加载？结合image-set属性" > 标签；而 srcset 是 HTML 属性，原生支持语义化、可访问性、SEO 和降级（src fallback）。这意味着：
- 用
image-set()就等于放弃<img alt="CSS如何实现响应式图片根据分辨率加载？结合image-set属性" >的所有语义优势，alt 文本、宽高属性、懒加载（loading="lazy"）全失效 - 即使写成
background-image: image-set("photo-1x.jpg" 1x, "photo-2x.jpg" 2x);，Safari 直接忽略整条声明，Firefox 也一样 - 它不感知视口宽度，只认设备像素比（DPR），没法做“小屏加载 400w、大屏加载 1200w”这种真正响应式决策
image-set() 唯一能跑通的场景和写法
仅限现代 Chrome（≥89）+ 纯 CSS 背景图 + 必须配合 background-size: cover 或 contain 才可能渲染出来：
div.hero {
background-image: image-set(
"hero-400.jpg" 1x,
"hero-800.jpg" 2x,
"hero-1200.jpg" 3x
);
background-size: cover;
background-repeat: no-repeat;
}
但要注意：
立即学习“前端免费学习笔记（深入）”；
- 路径必须是相对或绝对 URL，不能是 Webpack/Vite 的
~别名或@/assets别名（构建时不会解析 CSS 中的image-set） - 没有
sizes对应机制，无法按断点切换，只能靠 DPR 切换——在 MacBook Pro 视网膜屏上永远走 2x，手机上可能走 3x，但桌面普通屏反而加载高清图 - 无法和
@media混用：你不能在媒体查询里再套一层image-set()，CSS 不允许嵌套函数
真正该用什么？srcset + sizes 是唯一靠谱路径
所有主流浏览器都支持，且行为稳定。关键不是“分辨率”，而是“图片在页面中实际占多宽”：
-
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 600px"告诉浏览器：“移动端占满屏，平板占半屏，桌面固定 600px” -
srcset="photo-400w.jpg 400w, photo-800w.jpg 800w, photo-1200w.jpg 1200w"提供对应宽度的资源 - 浏览器根据
sizes计算出“当前要渲染的宽度”，再挑最接近的w值源图下载——这才是真实按需 - 记得加
src="photo-600w.jpg"作为不支持srcset的旧浏览器兜底
别被“分辨率”这个词带偏——用户用的是视口宽度，不是屏幕物理 DPI。真要适配高 DPR 设备，srcset 里混用 x 和 w 描述符会触发未定义行为，统一用 w 最稳。构建时用 sharp 批量生成多尺寸图，比手写 image-set() 省心十倍。
