真响应式必须由浏览器主动选图，需用srcset+sizes或<picture>驱动；仅max-width:100%和height:auto无法节省流量，因手机仍下载桌面大图。
max-width: 100% 和 height: auto 是基础，但仅靠它们不能节省流量——手机仍会下载桌面尺寸的大图。真响应式必须由浏览器主动选图，这得靠 srcset + sizes 或 <picture> 驱动。
img { max-width: 100%; height: auto; } 必须成对出现，且受父容器制约
单独写 max-width: 100% 而漏掉 height: auto，图片会被拉伸或压扁；写在 display: flex 容器里时，min-width: 0 是隐藏开关——否则 flex 默认的 min-width: auto 会阻止图片收缩。
- 父容器若设了固定像素宽（如
width: 800px），再灵活的图片也缩不进去 - 推荐给图片外层加一层
div并设max-width: 100%，避免意外继承限制 -
display: block可消除<img>默认的行内基线留白，非必需但省心
srcset + sizes 写错一个字符，浏览器就直接退化为只加载 src
sizes 是字符串，不是 CSS；它不支持 calc()，空格位置敏感（旧版 Edge 会因 (max-width: 768px) 中多一个空格而整条失效）；srcset 里单位必须统一：全用 w（如 "a.jpg 480w, b.jpg 800w"）或全用 x（如 "c.jpg 1x, d.jpg 2x"），混写则整个 srcset 被忽略。
-
sizes值必须匹配真实布局：如果图片在 Grid 中占 1/3 宽，断点从 768px 开始，就该写sizes="(max-width: 768px) 100vw, 33.33vw"，而不是硬套通用模板 - 视口 375px + DPR=2 时，浏览器需要约 750px 宽的图源；若
srcset里最近的是 480w，它可能选 480w 图再放大，导致模糊 -
src是降级兜底，仅用于不支持srcset的极老浏览器，别指望它被现代浏览器加载
<picture> 不是可选项，是艺术方向和格式回退的刚需
当手机要裁人脸、桌面要展全景，或必须优先用 image/webp 但需降级到 image/jpeg 时，<picture> 是唯一解。它的 <source> 按顺序匹配，第一个满足 media 和 type 的生效，最后必须跟一个 <img> 作最终兜底。
立即学习“前端免费学习笔记（深入）”；
-
<source>的media断点必须和实际 CSS 布局一致；写了768px就别在 CSS 里用767px，否则错位 -
type="image/webp"拼错（比如多写分号或大小写错误），浏览器直接跳过该<source> -
<picture>必须包裹<img>，顺序反了（<img>在前）整个结构失效
真正难的不是写对语法，而是让 sizes 值始终跟着布局走——CSS Grid 列数变了、Flex 项目占比调了、媒体查询断点微调了，sizes 就得同步改，否则浏览器选图逻辑就偏了。
