响应式图片真正起效需HTML层面的srcset+sizes或，仅CSS缩放不省流量；因浏览器在解析HTML时即发起请求，此时CSS未生效，故width:100%无法阻止小屏加载大图。

直接说结论：响应式模板里图片不能只靠 max-width: 100% 和 height: auto，那只是防溢出的底线；真正起效的是在 HTML 层面用 srcset + sizes 让浏览器自己挑图，或用 处理构图/格式切换——CSS 缩放不省流量，也不改加载行为。

为什么加了 width: 100% 还是加载大图？

因为浏览器在解析 HTML 阶段就发起图片请求，此时 CSS 还没生效。仅靠样式控制显示尺寸，完全无法阻止小屏设备下载一张 1920w 的图。

• srcset 告诉浏览器“我准备了哪些图”，必须带单位：photo-480w.jpg 480w（推荐）或 photo@2x.jpg 2x
• sizes 必须存在，且要和真实渲染宽度一致，例如：sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
• 如果 sizes 缺失，浏览器默认按 100vw 算，哪怕你 CSS 里写了 max-width: 600px，它也看不见
• 检查是否生效：打开 DevTools → Network → 找到图片请求 → 看 Request Headers 里有没有 Sec-CH-DPR 或 Width 字段

什么时候必须用 而不是 ？

当需求超出“同一张图换分辨率”时， 的 srcset 就不够用了。比如：

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

• 竖屏用特写头像，横屏用全景构图 → 需要 media="(orientation: portrait)" + 不同 srcset
• 优先发 image/avif，不支持就跳过，再试 image/webp，最后 fallback 到 image/jpeg → 每个 必须带 type，且顺序不能错
• 的 media 和 type 是 AND 关系：浏览器跳过任何一个条件不满足的项
• 兜底的 必须存在，且必须含 src 和 alt，否则老浏览器不显示

Grid/Flex 布局下 sizes 怎么写才不翻车？

常见错误是把 sizes 写成死值，比如 "100vw"，但实际图片在 Grid 中只占三分之一宽。浏览器按 100vw 算，就会选错资源。

• 先确认真实渲染宽度：用 DevTools 的 Layout 面板看图片最终计算出的宽度（单位是 px）
• Grid 场景推荐写法：sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" —— 对应移动端全宽、平板半宽、桌面三分之一宽
• Flex 场景更危险：如果用了 flex-wrap 且子项异步加载，最后一行列宽可能不均，建议改用 Grid + repeat(auto-fit, minmax(250px, 1fr))
• 别用 margin 模拟间距，Grid 必须用 gap，否则 sizes 匹配逻辑会崩

最常被忽略的一点：即使你只用 x 单位（如 1x/2x），sizes 也得写，至少写成 sizes="100vw"，否则浏览器行为不可控。这不是可选项，是浏览器做资源选择的必要输入。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！