srcset不是写了就能自动适配的开关，必须与sizes（w描述符时）或明确布局约束（x描述符时）配合才生效；漏写或写错sizes会导致浏览器忽略srcset而仅加载src。
直接说结论：srcset 不是“写了就能自动适配”的开关，它必须和 sizes（用 w 描述符时）或明确的布局约束（用 x 描述符时）配合才生效；漏掉 sizes 或写错单位，浏览器大概率直接忽略整个 srcset，只加载 src。
srcset + sizes 必须成对出现（w 描述符场景）
你写 srcset="a.jpg 400w, b.jpg 800w" 却没写 sizes，浏览器根本不知道这张图在页面里实际占多宽，无法把“视口宽度 × DPR”映射到 400w/800w 上——它不是猜，是放弃匹配，退化为加载 src 或第一个候选项。
-
sizes值必须带单位，比如"(max-width: 768px) 100vw, 50vw"合法，"50%"或"400"无效，整条属性被丢弃 - 最后一项建议写兜底值，如
"(max-width: 768px) 100vw, 50vw"比"(max-width: 768px) 100vw"更稳妥，旧版 Safari 可能 fallback 到100vw - 媒体查询括号内不能有空格：
(max-width:768px)在部分 Edge/Safari 会解析失败，必须写成(max-width: 768px)
为什么加了 srcset 还是总加载最大图
核心原因不是 CDN 或图片没压缩，而是 sizes 告诉浏览器的“渲染宽度”远大于真实占用空间。比如 CSS 设置 max-width: 400px，但 sizes 写成 "100vw"，视口 1200px 时浏览器就去匹配最接近 1200w 的图——哪怕它只显示在 400px 宽的卡片里。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 检查 DevTools → Network 面板，看实际请求的 URL 是哪个；更准的是在控制台查
document.querySelector('img').currentSrc - 用 Chrome 的 “Disable cache” 多刷几次，观察哪些
srcset候选项根本没发出请求——这些就是冗余项，删掉 - 如果用了 Flex/Grid 且容器宽由
minmax()或fr动态决定，sizes很难精确表达，此时该换<picture></picture>+<source media></source>
w 和 x 描述符不能混用在同一 srcset 中
写成 srcset="icon-1x.png 1x, photo-800w.jpg 800w"，浏览器直接丢弃整条 srcset，只加载 src。它不区分“哪部分有效”，是全盘失效。
- 用
x：适合固定尺寸图标、头像，例如<img src="avatar.jpg" srcset="avatar.jpg 1x, avatar@2x.jpg 2x" style="max-width:90%" style="max-width:90%">，sizes可省略 - 用
w：适合流式内容图、banner，必须配sizes，且srcset里所有候选项都得是xxxw -
1x、2x必须写整数，1.0x或2.5x不被识别
img 标签必须带 src 才能降级兼容
src 不是可选项，是所有浏览器都识别的兜底地址。只写 srcset，IE 和部分低版本 Android WebView 会完全不显示图片。
-
src应指向一个中等清晰度、体积适中的版本（如 768w），确保无 JS、弱网或解析失败时仍能展示 -
<img>必须设内联width和height（按原始图比例），否则防不住布局抖动（CLS）。写width="100%"或height="auto"对预留空间无效 - 响应式底线是 CSS 加
max-width: 100%和height: auto，二者缺一不可；仅靠srcset缩放，文件体积没变，首屏仍卡
真正容易被忽略的点是：浏览器在 300ms 内就发出了图片请求，后续所有优化（CDN、缓存、压缩）都补不回错误尺寸的选择。问题不在“怎么优化”，而在“第一次就选对”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
