真正美观省流量的响应式图片需用srcset+sizes或<picture>，而非仅靠max-width:100%和height:auto；否则大图全量下载导致卡顿、LCP差、布局抖动。
光靠 max-width: 100% 和 height: auto 做不出真正美观又省流量的响应式图片——它只管“不撑破”，不管“不该下那么大图”。真要兼顾视觉质量、加载速度和布局稳定，必须用 srcset + sizes 或 <picture> 驱动浏览器选图，而不是靠 CSS 拉伸一张 2MB 的桌面图。
为什么写了 max-width: 100% 还是卡顿、LCP 差？
因为这张图依然被全量下载了。手机加载 banner-1920w.jpg 再缩到 375px 宽显示，像素全下了，但用户只看到 30KB 有效信息。更糟的是：
- 没设
width和height属性的<img>会导致布局抖动，直接拉长 LCP - Flex 容器里默认
min-width: auto，图片死活缩不进窄容器，得手动加min-width: 0 -
object-fit: cover不解决占位问题——父容器没明确宽高，它根本不起作用
sizes 写错，浏览器就当没这回事
sizes 不是 CSS，它是字符串，告诉浏览器“这张图在页面上实际占多宽”。写错就等于没写，浏览器退化为只加载 src。
- 必须和真实 CSS 布局断点对齐：比如
.hero-img { width: 720px; }在@media (min-width: 768px)下生效，sizes就得写成"(max-width: 767px) 100vw, 720px" - 有 padding 就要减：父容器
padding: 0 20px，视口宽 390px，有效宽度 ≈350px，sizes得写成"(max-width: 767px) 350px, 720px" - 单位不能混：不能写
"(max-width: 480px) 100vw, 720px"，要么全用vw，要么全用px - 旧版 Edge 解析
sizes时，媒体查询里带空格（如(max-width: 768px)）会整条失效
<picture> 不是可选项，是艺术方向和格式回退的刚需
当你需要手机裁人脸、桌面展全景，或必须优先用 WebP/AVIF 但降级到 JPEG/PNG 时，<picture> 是唯一解。但它容易踩坑：
立即学习“前端免费学习笔记（深入）”；
-
<source>顺序决定匹配优先级：最具体的放最前，兜底的<img>必须放在最后 -
type="image/webp"拼错（比如多写分号或大小写错误），浏览器直接跳过整条<source> - Safari 13 及更早不支持 WebP，所以
<source type="image/webp">必须排在<source type="image/jpeg">前面 - 同一
<source>里不能混用w和x描述符，部分 Android 浏览器会忽略整条srcset
预生成多尺寸图 + CDN 支持 Accept 头才是闭环
再完美的 HTML 也救不了没准备好的资源。浏览器不会帮你实时压缩或裁剪，它只会从你给的列表里挑一个下载。
- 超大图不能靠前端缩放：
<img src="banner-10MB.jpg">即使加了sizes，还是得全量拉下 10MB - WebP/AVIF 必须预生成并上传，CDN 要能根据请求头
Accept: image/avif,image/webp,*/*返回对应格式 - 没设原始比例的
width/height，比如 1200×800 的图只写width="1200"，浏览器无法计算 aspect ratio，布局仍可能抖动 - 推荐双保险：
<img width="1200" height="800">+ CSSaspect-ratio: 1200 / 800，Safari 旧版可用padding-top技巧降级
最麻烦的不是写错一行代码，而是 CSS 布局改了但 sizes 没同步，或者 srcset 提供的宽度档位和 sizes 算出的目标像素不匹配——这时候浏览器看似在工作，其实一直在加载远超需要的资源。
