响应式图片必须组合srcset+sizes或<picture>，仅max-width:100%+height:auto仅防溢出保比例，不解决流量浪费与源图选择；sizes须严丝合缝匹配真实布局宽度，否则选图偏差可达2–3倍。
只靠 max-width: 100% 不算掌握响应式图片——它不省流量、不选源、不防裁切，真正能落地的方案必须组合 srcset + sizes 或 <picture>，且每处参数都得对得上真实布局。
为什么 max-width: 100% + height: auto 只是起点，不是终点
这两条 CSS 是底线，不是解法：前者防溢出，后者保比例，漏掉任意一个就会变形或撑破容器。但它们完全不影响浏览器加载哪张图——手机仍可能下载一张 2000px 宽的图再缩成 375px 显示。更隐蔽的问题是：flex 容器默认 min-width: auto，会卡住图片收缩，必须显式加 min-width: 0 才生效。
srcset 和 sizes 怎么配才不白写
常见错误是写了 srcset 却漏掉 sizes，或者把 sizes 写成死值 "100vw"，结果浏览器按 100% 视口宽去匹配，加载了两倍大的图。
-
srcset必须统一用w（推荐）或x描述符，不能混用：比如"small.jpg 480w, big.jpg 2x"是无效的 -
sizes是字符串，不是 CSS，不支持calc()，但支持媒体查询语法："(max-width: 768px) 100vw, 50vw" - 如果图片在 Grid 中占 1/3 宽，断点从 768px 开始，
sizes就该是"(max-width: 768px) 100vw, 33.33vw"，不是硬写100vw - 旧版 Edge（EdgeHTML）会因
sizes里多一个空格（如(max-width: 768px)）直接失效；Safari 12.1 之前对w描述符支持不全
什么情况下非用 <picture> 不可
当需求超出分辨率适配范畴时，<picture> 是唯一选择。比如：
立即学习“前端免费学习笔记（深入）”；
- 手机竖屏要裁人脸特写，桌面横屏要展全景构图——
srcset无法切换裁剪逻辑，只能靠<source>的media属性控制 - 想优先用
WebP，但需降级到JPEG：必须用type="image/webp"+<img src="fallback.jpg">，且type拼错（如多写分号）会导致整条<source>被跳过 -
<source>匹配是 AND 关系：media="(min-width: 1024px)" type="image/avif"两个条件必须同时满足，不满足就往下找 - 顺序很重要：最具体、最高优先级的规则必须放在最前面，兜底的
<img>必须存在且带src和alt
移动端预览常被忽略的细节
在 CodePen、JSFiddle 等在线环境调试时，很多问题不是代码错，而是环境没配齐：
- 缺
<meta name="viewport" content="width=device-width, initial-scale=1">，sizes里的vw单位会失效 - 用相对路径如
src="images/photo.jpg"，沙箱环境通常不提供目录结构，必须用绝对 URL 或 base64 -
object-fit: cover+object-position控制焦点很有效，但前提是容器有明确宽高；否则在 iOS Safari 上完全不生效 - 想让手机预览时面部始终可见，别用
top这种关键词，改用百分比：object-position: 50% 20%更可控
真正难的从来不是写对一行 srcset，而是让 sizes 值和真实 CSS 布局宽度严丝合缝，且在 flex/grid/媒体查询切换时同步更新——差 1px，就可能多下 1MB。
