srcset 配合 sizes 才能实现响应式图片智能选择；仅用 srcset（w 描述符）而无 sizes，浏览器将忽略 srcset、退化为加载 src 图片。
srcset 不是“让图片变清晰”的开关，而是告诉浏览器：“我准备了多张图，你按需挑一张”。它本身不改变渲染效果，但选错图就会直接导致模糊或卡顿。
为什么写了 srcset 还是加载了低清图？
最常见原因是漏了 sizes 属性。浏览器在只有 srcset 没有 sizes 时，会退回到仅看设备像素比（DPR），并把 src 当作 fallback —— 也就是说，你看到的很可能就是 src 那张图，而不是 srcset 里任何一项。
-
sizes值语法错误：比如写成(max-width: 768px) 300px（px单位非法），正确应为300vw或calc(100vw - 20px) - 当前视口宽度没匹配任一
sizes中的 media 条件，浏览器会 fallback 到src -
src路径 404，部分浏览器会强行加载srcset第一个项，造成“看似生效”实则误判
srcset 用 w 描述符还是 x 描述符？
优先选 w 描述符（如 image-800.jpg 800w），它配合 sizes 才能真正实现响应式布局适配；x 描述符（如 icon@2x.png 2x）只适合固定尺寸小图，且必须明确知道它在 CSS 中始终占固定像素宽高（比如 width: 24px; height: 24px）。
- 混用必出问题：比如
sizes="(max-width: 768px) 100vw"却配srcset="logo@2x.png 2x"，浏览器无法把 DPR 和布局宽度对齐 -
x描述符在桌面端高 DPR 屏（如 MacBook Retina）上表现稳定，但在移动端（尤其 Android）DPR 判定不一致，容易加载过大的图 -
w描述符兼容性更好（Chrome 38+、Firefox 38+、Safari 8+），全球支持率超 95%
怎么验证 srcset + sizes 真正在起作用？
别只看页面显示效果，要进 DevTools 的 Network 面板看实际加载的是哪张图。切换设备模拟器后，刷新页面，过滤图片请求，检查 URL 是否随视口变化而切换。
- 确保
sizes值中每个 media 条件都覆盖连续区间，例如：sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"，不能留空档 - 如果用了构建工具（如 Webpack、Vite），确认生成的多尺寸图文件真实存在且路径正确 ——
srcset写得再准，404 就等于白搭 - 懒加载（
loading="lazy"）对img[srcset]有效，但对<picture></picture>内的<source></source>无效
最容易被忽略的一点：浏览器选择逻辑不是“精确匹配”，而是“找最接近又不小于显示所需像素”的那张图。比如 sizes 算出图片需显示 750px 宽，DPR=2，则需 1500 像素有效宽度，此时若有 1200w 和 1600w 两档，浏览器大概率选后者 —— 即便略大，也比模糊强。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
