image-set() 基本不可用，因仅按DPR选图、无视视口宽度、无降级机制，且Safari/Firefox完全不支持，Chrome≥89仅限background-image且需background-size:cover；响应式图片应优先使用srcset+sizes搭配标签。
image-set() 不能解决响应式图片加载过大问题，反而会加剧兼容性风险和加载失控——它不支持视口宽度判断、无法降级、Safari/Firefox 完全无视，Chrome ≥89 也仅限 background-image 场景且必须配 background-size: cover 才可能渲染。
为什么 image-set() 在实际项目中基本不可用
它只按设备像素比（DPR）选图，比如 1x/2x，但完全不感知视口宽度。你没法写 “小屏加载 400w、中屏加载 800w、大屏加载 1600w” 这类真正响应式逻辑；image-set("a.jpg" 1x, "b.jpg" 2x) 在 DPR=1.5 的 iPad 上行为不确定，浏览器可能 fallback 到 1x 或直接忽略；所有主流浏览器中，只有现代 Chrome 有限支持，Firefox 从无实现，Safari 始终跳过整条声明，连警告都不抛。
真正可控的响应式图片方案：用 srcset + sizes 配合 ![]()
这才是语义正确、可访问、可 SEO、有降级能力的正解：
-
srcset提供多尺寸源（如"photo-400w.jpg 400w, photo-800w.jpg 800w, photo-1200w.jpg 1200w"），浏览器根据设备 DPR 和视口宽度综合决策 -
sizes明确告诉浏览器“这张图在不同断点下打算占多宽”，例如sizes="(max-width: 768px) 100vw, 800px"，让浏览器能精准匹配srcset中最合适的源 - 首图可加
loading="lazy"（现代浏览器原生支持），非首屏图片自动延迟加载 - 即使 JS 失效或网络异常，
src属性仍提供基础 fallback，不会白屏
如果非要用 CSS 背景图，别碰 image-set()，改用媒体查询 + 多层 background-image
虽然所有规则里的图片都可能被预加载（这是缺陷），但它至少能跑通所有浏览器：
div.hero {
background-image: url("/img/hero-400w.jpg");
}
@media (min-width: 768px) {
div.hero {
background-image: url("/img/hero-800w.jpg");
}
}
@media (min-width: 1200px) {
div.hero {
background-image: url("/img/hero-1600w.jpg");
}
}
注意：必须确保各断点下的图片尺寸与容器实际渲染尺寸匹配，否则高 DPR 设备仍会模糊——必要时在 @media (-webkit-min-device-pixel-ratio: 2) 里再覆盖一次 2x 版本。
真正难的不是语法，而是区分「装饰性背景图」和「内容性图片」：前者可用 CSS 方案妥协处理，后者必须用 srcset，否则就等于主动放弃可访问性、SEO 和加载控制权。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
