srcset 是逗号分隔的“URL + 空格 + 宽度描述符（如400w）或像素密度描述符（如2x）”组合，浏览器据此按设备宽度或dpr选择最匹配图片；仅用w需配合sizes，仅用x需保留src作为1x fallback。
srcset 里写的是什么格式？
它不是随便写几个 URL 就行，而是一组用逗号分隔的 图片URL 宽度描述符 或 图片URL 像素密度描述符。浏览器根据当前设备的屏幕宽度或 dpr 自动选一个最匹配的。
常见错误是漏掉空格、混用描述符、或者把 1x 写成 1.0x（后者不被识别）。
-
srcset中每个项必须是图片路径+ 一个空格 +数值w（如800w）或数值x（如2x），不能省略空格 - 只用
x描述符时，src必须存在，且视为1x的 fallback - 只用
w描述符时，必须配合sizes属性，否则浏览器无法判断“多宽算宽”
sizes 属性为什么不能省？
当 srcset 用 w 描述符（比如 img-400w.jpg 400w, img-800w.jpg 800w）时，浏览器光知道“这张图有 400 像素宽”，但不知道“在页面上它会占多宽”。sizes 就是用来告诉浏览器：在不同断点下，这张图的显示宽度是多少。
典型错误是写死一个值（如 sizes="100vw"），结果在侧边栏缩略图里也拉满全屏，加载了远超需要的大图。
立即学习“前端免费学习笔记（深入）”；
-
sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"表示：小屏占满、中屏占半、大屏占三分之一 - 值必须是媒体条件 + 宽度，最后一条不带条件，作为兜底
- 单位只能是
vw、px、em等 CSS 长度单位，不能写400px这种固定值（除非你真希望所有设备都显示 400px 宽）
怎么和 picture 元素配合用？
<picture> 是更上层的响应式控制，适合做艺术方向裁剪、格式降级（如 WebP → JPEG）、或完全不同的布局适配。srcset 在 <source> 里依然有效，但规则稍有不同。
容易踩的坑是把 srcset 放在 <img> 上，却忘了给它加 src —— 这会导致 Safari 等浏览器直接不加载任何图。
-
<source>可以有srcset+media（按视口选源），也可以有srcset+type（按 MIME 类型选源） -
<img>标签仍需保留src和alt，它是所有浏览器的最终 fallback - 多个
<source>按顺序匹配，第一个满足media或type的生效，后面的被忽略
<picture> <source media="(min-width: 1200px)" srcset="hero-1200w.webp 1200w, hero-2400w.webp 2400w" type="image/webp"> <source media="(min-width: 1200px)" srcset="hero-1200w.jpg 1200w, hero-2400w.jpg 2400w" type="image/jpeg"> <source srcset="hero-400w.webp 400w, hero-800w.webp 800w" type="image/webp"> <img src="hero-400w.jpg" alt="英雄图"> </picture>
实际开发中哪些细节最容易被忽略？
多数人写了 srcset 就以为完事了，但真实环境里常因几处小疏漏导致响应式失效或性能倒退。
- 没验证是否真的加载了预期尺寸的图：用 Chrome DevTools 的 Network 面板过滤
Img，看请求的 URL 和 size 列；勾选 “Disable cache” 并切换设备模拟器再刷新 - CDN 或图片服务返回的响应头缺少
Content-Length或Vary: DPR, Width，导致缓存错乱（比如手机用户拿到桌面图的缓存） - 服务器未开启 WebP 支持，却在
type="image/webp"里写了 WebP 地址，结果 fallback 失败，图片空白 - 构建工具（如 webpack / vite）未配置图片资源处理，导致
srcset里的相对路径在打包后 404
