只用 max-width: 100% 远远不够；真正实现带宽节省和视觉适配，必须组合 srcset + sizes 或 ，且 sizes 写错就等于白配。
直接说结论：只用 max-width: 100% 是基础但远远不够；真正实现带宽节省和视觉适配，必须组合 srcset + sizes 或 <picture></picture>，且 sizes 写错就等于白配。
为什么 max-width: 100% 单独用会浪费流量
它只解决“不撑破容器”这一个视觉问题，图片原始尺寸没变——手机加载 2000px 宽的图，再缩到 375px 显示，像素全下了，带宽白耗。用户在 4G 网络下等三秒，实际只看到 30KB 的有效信息量。
-
max-width: 100%必须搭配height: auto，否则比例失真 - 父容器若用了
flex，默认min-width: auto会卡住图片收缩，得加min-width: 0 - 它不触发浏览器资源选择逻辑，
srcset和<picture></picture>才干这事
srcset + sizes 怎么写才不被浏览器忽略
混用 1x 和 480w 描述符、漏写 sizes、或 sizes 值与真实布局脱节，都会导致浏览器跳过整个 srcset，退化为只加载 src。
-
srcset里只能统一用w（如"small.jpg 480w, medium.jpg 768w"）或统一用x（如"small.jpg 1x, big.jpg 2x"），不能混 -
sizes是字符串，不是 CSS，不支持calc()，但支持媒体查询语法：sizes="(max-width:480px) 100vw, (max-width:768px) 50vw, 33vw" - 如果图片在栅格中占 1/3 宽，且断点从 768px 开始，
sizes就该是"(max-width:768px) 100vw, 33.33vw"，不是硬写100vw - Safari 12.1 之前版本对
w描述符支持不全，旧 iOS 可能只按 DPR 粗略匹配
<picture></picture> 什么情况下非用不可
当不同屏幕需要完全不同的构图（比如手机裁人脸、桌面展全景）、或需强制指定格式（WebP/AVIF）并提供降级路径时，<picture></picture> 是唯一解；仅适配分辨率差异，srcset + sizes 更轻量。
-
<source></source>必须写在<img>标签之前，顺序错就失效 -
media属性断点要和真实 CSS 布局断点一致，比如用768px就别写成767px -
type="image/webp"的<source></source>若浏览器不支持 WebP，会跳过，落到下一个<source></source>或最终<img>，所以 fallback 必须存在且验证过加载效果 - 所有
<source></source>的srcset若含2x，必须对应标注，否则 Retina 屏仍加载低清图
容易被忽略的兼容性细节
旧版 Edge（EdgeHTML）解析 sizes 时，媒体查询里有空格（如 (max-width: 768px)）会导致整个属性失效；Safari 对 w 描述符的支持直到 12.1 才稳定；而 object-fit 在容器无明确宽高时完全不生效——这些都不是“写了就跑通”的事。
最常出问题的是：flex 容器没设 min-width: 0 导致图片不缩，sizes 按设计稿写死却没考虑实际布局变化，以及以为加了 srcset 就自动适配，结果发现手机始终加载 desktop 图。这些地方一错，响应式图片就只剩“看起来不溢出”这一个优点了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
