srcset与sizes必须协同工作才能实现响应式图片资源精准加载；仅靠max-width:100%仅解决缩放，不减少流量。
跨平台网页设计中，HTML响应式图片不是“让图片能缩放”就完事了——浏览器必须加载与设备匹配的资源文件，否则手机照样下 2MB 大图再缩成 375px 宽，流量白跑、首屏卡顿、用户流失。
img 的 max-width: 100% 和 height: auto 是底线，不是全部
很多页面只写 max-width: 100%，结果在 flex 容器里图片不收缩、在 Safari 里被拉长。这是因为：
- 漏掉
height: auto→ 图片宽高比崩坏，变形不可避免 - 父容器是
display: flex时，min-width: auto（flex 默认行为）会阻止图片缩小，必须显式加min-width: 0 - 用
width: 100%替代max-width: 100%→ 小图会被强行拉伸失真
这组 CSS 只解决渲染问题，不干预资源加载。它只是响应式的“门面”，不是“内核”。
srcset + sizes 组合才是跨平台选图的核心逻辑
浏览器靠 srcset 提供候选资源、靠 sizes 推算目标物理宽度，两者缺一不可。漏写 sizes 或写错格式，整个 srcset 就被忽略，退化为只加载 src。
-
srcset必须统一用w描述符（如"small.jpg 480w"）或统一用x（如"high.jpg 2x"），混用会导致部分浏览器直接跳过 -
sizes是字符串，不是 CSS；不支持calc()，但支持媒体查询语法：sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw" - 如果图片在 Grid 中占 1/3 宽，且断点从 768px 开始，
sizes就该是"(max-width: 768px) 100vw, 33.33vw"，不是硬写"100vw" - Safari 12.1 之前对
w描述符支持不全，旧 iOS 可能只按 DPR 粗略匹配，别指望它精准选图
picture 元素用于艺术方向切换和格式降级，不能被 srcset 替代
当你要在移动端裁人脸、桌面端展全景，或者优先加载 image.webp、不支持时回退到 image.jpg，<picture></picture> 是唯一解。它的 <source></source> 匹配是 AND 逻辑：media 和 type 必须同时满足。
- 顺序很重要：最具体规则放最前，比如先写
media="(min-width: 1024px) and (min-resolution: 2dppx)" type="image/webp" -
type="image/webp"拼错（如多写分号、大小写错误）→ 整条<source></source>被忽略 - 兜底的
<img>必须存在，且不能省略src和alt，否则无图可显 - 旧版 Edge（EdgeHTML）解析
sizes时，媒体查询里有空格（如(max-width: 768px)）会导致整个属性失效
容易被忽略的兼容性细节和性能陷阱
真正麻烦的从来不是“怎么写”，而是“写了之后是否真按预期运行”。几个高频翻车点：
- CSS 布局变了但
sizes没同步更新 → 浏览器误判目标宽度，加载两倍大的图 -
srcset提供的宽度候选值（如 480w、768w、1200w）和sizes计算出的目标物理像素不匹配 → 浏览器可能选不到最接近的项，退而求其次 - object-fit 在容器没有明确宽高时完全不生效 → 别指望它在
height: auto的父元素里起作用 - Grid 布局做图册时，用
flex-wrap代替auto-fit + minmax()→ 最后一行留白、列宽不均、断行错位是常态
这些点不会报错，但会让响应式图片在真实设备上失效——你得在 Chrome DevTools 的 Network 面板里看实际加载的是哪张图，而不是只信代码写对了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
