srcset应根据图片容器是否固定宽选择x或w描述符：固定尺寸用1x/2x，响应式布局必须用400w/800w配合sizes；二者不可混用，否则整个属性被忽略而回退到src。
srcset 不是语法复杂，而是你没分清 x 和 w 两种模式的使用边界——混用或漏配 sizes 就会失效，浏览器直接退回到 src。
srcset 里写 1x/2x 还是 400w/800w？看容器是否固定宽
如果图片在页面中始终显示为固定 CSS 尺寸（比如头像 width: 64px; height: 64px），就用 x 描述符；如果它随布局变化（比如 banner 在手机占满屏、桌面固定 800px），必须用 w 描述符 + sizes。
-
x模式：只认设备像素比（window.devicePixelRatio），不关心视口多宽，也不需要sizes -
w模式：完全依赖sizes告诉浏览器“这张图在当前断点下渲染宽度是多少”，否则浏览器按默认100vw算，大概率载错 - 绝对不能在一个
srcset里混写logo.png 1x, hero-800w.jpg 800w—— 整个属性被忽略，只加载src
sizes 属性怎么写才不被浏览器无视？
sizes 不是 CSS，也不是媒体查询替代品，它只做一件事：声明“这张图在不同视口宽度下，CSS 渲染宽度是多少”。值必须是媒体条件 + 长度单位组合，且单位只能是 vw、px、em、rem、calc()，不能用 % 或 px 单独出现。
- 错误写法：
sizes="100%"、sizes="300px"、sizes="(max-width: 768px) 300px,"（末尾逗号导致解析失败） - 正确写法：
sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw" - 如果图片容器是
max-width: 400px; width: 100%，对应sizes="(max-width: 400px) 100vw, 400px" - DevTools Elements 面板里
sizes值显示为灰色？说明语法非法，浏览器已跳过
为什么 Network 面板里还是加载了 src 的图？
浏览器只在 srcset + sizes 同时存在且合法时，才会忽略 src 做智能选择。否则一律 fallback 到 src —— 这不是 bug，是设计行为。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 检查点 1：确认
sizes是否真的写了，且没有拼错属性名（比如写成size） - 检查点 2：打开 DevTools → Network → 切换设备模拟器 → 刷新，右键图片 → “Copy image src”，比对是否命中你预期的文件名
- 检查点 3：
src路径是否 404？部分浏览器发现src失效，会强行 fallback 到srcset第一个项，造成“看似生效”的假象
picture + source 和纯 img[srcset] 什么时候该选谁？
要切格式（WebP/JPEG）、做艺术方向裁剪（竖图 vs 横图）、或需精细控制断点逻辑，必须用 <picture>；如果只是同一张图的不同分辨率，<img srcset> 更轻、更快、支持 loading="lazy"。
-
<source>必须放在<picture>内部，且必须在<img>标签之前，否则被忽略 -
<source media>是从上到下匹配，第一个为 true 就停，所以要把最具体的条件（如(min-width: 1200px)）放前面 -
<img>在<picture>里不是 fallback，而是必渲染元素：哪怕所有<source>都不匹配，它也会加载并显示 -
loading="lazy"对<source>无效，只作用于<img>
真正容易被忽略的点是：即使 srcset 正确加载了 2x 图，如果用 CSS 强设 width: 300px; height: 200px，而原图是 600×400，浏览器仍会拉伸渲染——模糊不是 srcset 的问题，是 CSS 覆盖 intrinsic 尺寸导致的失真。
