max-width: 100% + height: auto仅解决视觉缩放，不控制资源加载；必须配合srcset+sizes才能按实际渲染宽度精准选图，否则小屏仍加载大图浪费带宽。
直接用 <img> 标签加两行 CSS 就能实现基础响应式图片，但只写 max-width: 100% 和 height: auto 是远远不够的——它不省流量、不防拉伸、小屏照样加载桌面大图。
为什么 max-width: 100% + height: auto 只是起点
这组样式只解决“视觉不溢出”，但浏览器仍会下载 src 指向的原始图片。比如你写了 <img src="hero-2000.jpg">，手机访问时照样下 2MB 大图，再缩成 375px 宽显示，纯属浪费带宽和首屏时间。
-
max-width: 100%：让图片最大宽度不超过父容器，小屏自动缩小 -
height: auto：保持原始宽高比，避免变形 - 千万别加
width: 100%—— 大屏下会强制拉伸失真 - 父容器必须也响应式（如
width: 100%或用 Grid/Flex），否则图片再“灵活”也受限
srcset + sizes 才真正控制加载哪张图
浏览器靠 sizes 算出图片在当前布局下的渲染宽度，再从 srcset 中选最匹配的资源。写错 sizes，整个机制就失效。
-
srcset必须用w描述符（如"small.jpg 480w"），混用2x会导致整条属性被忽略 -
sizes是字符串，不支持calc()，但支持媒体查询语法：sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw" - 如果图片在 Grid 中占 1/3 宽，且断点是
768px，sizes就不能硬写"100vw"，得按实际布局来 - 验证是否生效：Chrome DevTools → Network → 图片请求的 “Size” 列，看加载的是不是你预期的那张
<picture> 不是可选项，是特定场景刚需
当需要不同构图（比如手机裁人脸、桌面展全景）、或强制用 WebP/AVIF 并提供降级时，<img> 的 srcset 就不够用了，必须上 <picture>。
立即学习“前端免费学习笔记（深入）”；
-
<source>的media和type是 AND 关系：浏览器只选第一个既满足媒体查询、又支持 MIME 类型的项 - 顺序决定优先级，兜底的
<img>必须放在最后，且不能省略alt -
media断点必须和真实 CSS 布局断点一致（比如布局用768px，就别写767px） - 旧版 Edge 对
sizes中空格敏感（如(max-width: 768px)会失效），建议写成(max-width:768px)
容易被忽略的三个硬性前提
所有响应式图片技术都依赖这三个底层条件，漏一个，前面全白搭。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须放在<head>最顶部，不能动态插入、不能重复、不能加user-scalable=no - 图片父容器要设
overflow: hidden（尤其配合object-fit: cover时），否则加载抖动会触发重排 - 如果用
object-fit，父容器必须有明确宽高（比如width: 100%; aspect-ratio: 4/3），否则它根本不生效
