响应式图片起效关键在于srcset与sizes配对或条件匹配；仅max-width:100%无效，因浏览器请求前需知渲染宽度——sizes须严格对齐css布局，单位统一、覆盖断点、减去padding，否则仍加载大图。
响应式图片不是“加个 max-width: 100% 就完事”，真要起效，必须让浏览器在请求阶段就选对资源——这靠的是 srcset + sizes 的配对，或 <picture></picture> 的条件匹配；否则再小的 CSS 宽度，也拦不住 2MB 的大图被完整下载。
为什么写了 srcset 却还是加载最大图？
根本不是浏览器“没选好”，而是你没告诉它图片在页面上实际占多宽。浏览器拿到 sizes 后，先算出渲染宽度，再从 srcset 里挑最接近且不小于该宽度的图。如果 sizes 写成 "100vw"，桌面端就真按视口全宽算，哪怕容器只有 720px 宽，它也会拉下 2400w 的图。
- 必须和真实 CSS 布局对齐：先写好
@media (min-width: 768px) { .hero-img { width: 720px; } }，再转成sizes="(max-width: 767px) 100vw, 720px" - 单位必须统一：不能混用
vw和px，更不能塞rem - 有
padding就要减：父容器padding: 0 20px，视口宽 390px，有效宽度 ≈350px，sizes得写成"(max-width: 767px) 350px, 720px" - 漏写
sizes或写错语法（比如缺括号、空格位置错），整个srcset会被浏览器静默忽略，直接退化为只加载src
<picture></picture> 中 <source></source> 不生效的常见原因
<source></source> 是顺序匹配，media 和 type 是 AND 关系——任一条件不满足，整条就被跳过。浏览器不报错，Network 面板里根本看不到请求，容易误以为“代码没跑”。
-
media必须是合法 CSS 媒体查询：max-width: 768px（缺括号）或768px（非查询）都会失效 - 断点别重叠：
(max-width: 768px)和(min-width: 768px)在 768px 宽度下同时命中，但只有前者生效，后者永远不触发 - WebP/AVIF 必须排在 JPEG/PNG 前面：
<source type="image/webp"></source>→<source type="image/jpeg"></source>；Safari 13 及更早不支持 WebP，如果jpeg放前面，它卡住就不往下看了 -
type="image/webp"拼错（如多写分号或大小写错）会导致整条被忽略
sizes 属性写错的兼容性陷阱
sizes 是字符串，不是 CSS，不支持 calc()，也不接受计算属性。旧版浏览器对它的解析极其脆弱，稍有不慎就整条失效。
- 旧版 Edge（EdgeHTML）会因
sizes="(max-width: 768px)"中的空格而完全忽略该属性 - Safari 12.1 之前不支持
w描述符，sizes再准也没用，得靠<picture></picture>+2x回退 - 同一
<source></source>内不能混用w和x描述符，部分 Android 浏览器会直接忽略整条srcset - 没设
width和height的<img>会让 LCP 指标恶化：加载前不占空间，内容突然下移，浏览器误判首屏未完成，反而提前加载更大图
CDN 与自动化生成的关键约束
响应式图片不是前端写写 HTML 就能跑通的，后端和部署链路必须配合。CDN 要识别 Accept 头才能按需返回 WebP/AVIF；多尺寸图必须预生成，不能靠客户端缩放——浏览器不会实时降质或裁剪。
- WebP/AVIF 需置于 JPEG/PNG 前以兼容旧版 Safari
- 必须预生成多尺寸图片并配置 CDN 识别
Accept头，否则type切换形同虚设 - 只保留真实触发的断点：
<source media="(min-width: 1440px)"></source>如果 CSS 根本没定义这个断点，就是冗余项，徒增 HTML 体积 - 超大图不能靠前端缩放，必须预生成多档位；直接
<img src="banner-10MB.jpg">即使加了sizes，10MB 还是得全量拉下来
最麻烦的不是语法写错，而是 CSS 布局变了但 sizes 没同步更新，或者 srcset 提供的宽度候选值和 sizes 计算出的目标物理像素不匹配——这种问题在灰度发布或 A/B 测试时最难复现，往往只在特定设备+特定网络条件下暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
