srcset 和 sizes 必须配合使用，否则浏览器按100vw猜测宽度导致错载；max-width:100%+height:auto仅防溢出保比例，无法节省带宽；需用srcset的w/x描述符统一声明并配准sizes真实宽度。
srcset 和 sizes 必须一起用，否则浏览器大概率加载错图——只写 srcset 不写 sizes，浏览器会按 100vw 猜测图片宽度，实际在 flex 或 grid 里可能只占 50% 宽，结果多下了一倍体积。
为什么 max-width: 100% + height: auto 是底线，但远远不够
这两条 CSS 是防溢出、保比例的兜底手段，不加它们，图片直接撑破容器或变形。但仅靠它们，手机照样下载 2MB 的桌面图再缩到 375px 显示——像素全下了，带宽白耗，首屏卡顿。真正节省资源靠的是浏览器根据设备特性选图，不是靠 CSS 拉伸。常见错误包括：
- 只写
max-width: 100%却漏掉height: auto，图片被压扁 - 误用
width: 100%替代max-width: 100%，导致小图被强行拉宽失真 - 没配
viewport标签：<meta name="viewport" content="width=device-width, initial-scale=1.0">必须放在最顶部，否则所有响应式逻辑失效
srcset 里的 w 描述符和 x 描述符不能混用
浏览器遇到混写（比如 "small.jpg 480w, big.jpg 2x"）会直接忽略整个 srcset，退化为只加载 src。必须统一用一种描述方式：
- 用
w（推荐）：适配不同视口宽度，例如"img-480w.jpg 480w, img-768w.jpg 768w, img-1200w.jpg 1200w" - 用
x：适配不同设备像素比，例如"img-normal.jpg 1x, img-hd.jpg 2x" - 生成图片宽度建议按 1.5× 步进：320w → 480w → 768w → 1200w → 1920w，覆盖主流 DPR 和断点
什么情况下非用 <picture></picture> 不可
当需求超出 <img> 的能力边界时，<picture></picture> 是唯一解。它的 <source></source> 按顺序匹配，media 和 type 是 AND 关系，任意条件不满足就跳过。典型刚需场景：
- 艺术方向（Art Direction）：竖屏裁人脸、横屏展全景，例如
<source media="(max-width: 480px)" srcset="face-crop.jpg"></source> - 格式降级：优先 WebP/AVIF，不支持就 fallback 到 JPEG，例如
<source srcset="photo.webp" type="image/webp"><source srcset="photo.jpg" type="image/jpeg"></source></source> - 兜底的
<img>必须存在，且必须带src和alt；<source></source>写错（如type="image/webp;"多了个分号）整条会被忽略
最容易被忽略的是 sizes 值必须与真实渲染宽度一致——它不是 CSS，不支持 calc()，空格位置也敏感（旧版 Edge 会因 (max-width: 768px) 中多一个空格而失效）。别凭感觉写，用 DevTools 的 Layout 面板实测图片在各断点下的 computed width，再反推 sizes 字符串。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
