优先用width描述符，需配合sizes声明布局宽度；x描述符仅适用于固定尺寸小图（如图标、头像）且明确适配DPR场景，二者不可混用。
srcset 用 width 描述符还是 x 描述符？
选哪个取决于你控制图片显示宽度的方式。如果页面里用 sizes 声明了图片在不同断点下的布局宽度（比如 (max-width: 768px) 100vw），就该用 400w、800w 这类 width 描述符；如果只是想按设备像素比（DPR）匹配，比如 1x/2x/3x 屏，才用 image@2x.jpg 2x。
常见错误是混用：比如写了 sizes="(max-width: 768px) 100vw"，但 srcset 里只放 logo@2x.jpg 2x —— 浏览器没法把 DPR 和布局宽度对齐，可能在小屏高 DPR 设备上加载了过大的图，或在大屏低 DPR 上加载了模糊图。
建议优先用 width 描述符，兼容性更好（IE 不支持，但现代项目基本不考虑 IE），也更可控。x 描述符适合图标、头像等固定尺寸小图，且你明确知道它始终占固定像素宽高。
为什么加了 srcset 还是加载了 src 的图？
浏览器只在 srcset + sizes 都存在时，才忽略 src 做智能选择；如果漏了 sizes，多数浏览器会退回到只看 DPR，拿 src 当 fallback —— 所以你看到的很可能就是 src 指向的那张图。
立即学习“前端免费学习笔记（深入）”；
检查点：
-
sizes值是否语法合法？比如漏括号、逗号后多空格、用了 px 单位（sizes里不能写300px，得写300vw或calc(100vw - 20px)） - 当前视口宽度是否匹配任一 media 条件？可以用 DevTools 切换设备模拟，再看 Network 面板实际加载的是哪张
-
src的路径是否 404？有些浏览器发现src失效，会强行 fallback 到第一个srcset项，造成误判
picture + source 和纯 img[srcset] 该怎么选？
要切换格式（比如 WebP → JPEG）、做艺术方向裁剪（手机竖构图 vs 桌面横构图），必须用 <picture></picture> + <source></source>；如果只是同一构图、不同分辨率，用 <img srcset="" sizes="" alt="HTML怎么用srcset属性_html srcset多分辨率图片设置【进阶】" > 更轻量，解析更快，也更利于懒加载（loading="lazy" 对 <source></source> 无效）。
容易踩的坑：
-
<source></source>标签必须放在<picture></picture>内部，且必须在<img alt="HTML怎么用srcset属性_html srcset多分辨率图片设置【进阶】" >标签之前，否则被忽略 -
<source></source>的media是从上到下匹配，遇到第一个为 true 的就停，后面的不执行 —— 所以要把最具体的条件（如(min-width: 1200px)）放前面，宽泛的（如(max-width: 768px)）放后面 -
<img alt="HTML怎么用srcset属性_html srcset多分辨率图片设置【进阶】" >在<picture></picture>里不是 fallback，而是必渲染元素：哪怕所有<source></source>都不匹配，它也会加载并显示
构建时怎么避免手动维护一堆图片文件？
别手动生成 hero-400w.jpg、hero-800w.jpg…… 这种事交给工具。Vite 生态有 vite-plugin-imagemin + sharp 插件，Webpack 用 responsive-loader，都能在构建阶段按配置自动产出多尺寸版本，并注入正确 srcset 字符串。
关键提醒：
- CDN 自动适配（如 Cloudflare Image Resizing、Imgix）虽方便，但依赖请求头（
Device-Memory、DPR）或 URL 参数，对 SEO 不友好，且首次请求无法利用sizes预判 - 服务端 User-Agent 检测不可靠，尤其 iOS WebView 和安卓定制浏览器 UA 差异大，还增加首字节时间（TTFB）
- 真正省心的做法：构建时生成物理文件 + 静态 HTML 注入
srcset/sizes，既保兼容又控精度
最常被忽略的一点：sizes 值必须和 CSS 实际渲染宽度一致。比如你写了 sizes="(max-width: 768px) 100vw"，但 CSS 里给图片父容器加了 padding: 20px，那真实宽度其实是 100vw - 40px —— 这会导致浏览器选图偏大。用 calc() 或 JS 动态设置 sizes 属性前，务必实测 DevTools 的 Layout 面板。
