只靠 max-width: 100% 是假响应式，真高性能必须用 srcset + sizes 组合驱动浏览器决策，否则大图照下、小屏白耗流量；srcset 提供多分辨率源（如 480w），sizes 必须真实匹配布局占位宽度（如 (max-width: 480px) 100vw），浏览器据此选出最接近且不小于该宽度的资源，缺一不可。
直接说结论：只靠 max-width: 100% 是假响应式，真高性能必须用 srcset + sizes 组合驱动浏览器决策，否则大图照下、小屏白耗流量。
img 的 srcset 和 sizes 怎么配才不选错图
常见错误是把 sizes 写成固定值（比如 "100vw"），或漏掉 sizes 导致浏览器默认按 100vw 估算——结果在窄屏上加载了 1200w 的图。
-
srcset列出的是图片“物理宽度”，单位是w（如"photo-480w.jpg 480w"），不是 CSS 像素 -
sizes必须匹配实际布局占位：如果图片在移动端占满视口，中屏占半宽，桌面占三分之一，则写成"(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw" - 浏览器会先根据
sizes算出“这张图要显示多宽”，再从srcset中挑最接近且 ≥ 该宽度的资源——所以srcset里要有略大于目标尺寸的选项（比如目标 480px，就提供 480w 和 800w，别只给 400w）
picture 元素什么时候非用不可
当你需要“同一内容、不同构图”时，<picture></picture> 不可替代。比如轮播图首屏主图：手机竖版裁脸，平板横版裁胸，桌面全景。仅靠 srcset 无法切换构图，它只换尺寸，不换内容。
- 用
<source media="(max-width: 480px)" srcset="face-crop.jpg"></source>控制断点裁剪 - 必须保留
<img>作为兜底，否则不支持<picture></picture>的老浏览器会空白 - 格式回退也靠它：
<source srcset="photo.webp" type="image/webp"></source>+<img src="photo.jpg">，WebP 加载失败自动降级 - 注意：每个
<source></source>的media条件必须互斥且覆盖全范围，否则中间断层会导致 fallback 图被意外加载
为什么 max-width: 100% 还是得加，但不能只靠它
就算用了 srcset，CSS 层面的 max-width: 100% 仍是底线保障。否则当网络极慢、JS 失效、或图片加载中时，原始大图会撑爆容器，破坏布局。
- 必须同时写
height: auto，否则宽缩了高没变，图片被压扁 - 加上
display: block可消除<img>默认的 inline 基线对齐带来的底部空白 - 如果父容器本身没设宽（比如 flex 容器未限制），
max-width: 100%就失去意义——得先确保父级有明确宽度上下文 - 网格布局中图片变形？补
aspect-ratio: 4/3或套一层<div style="overflow: hidden"> 强制裁剪 <h3>懒加载和错误降级怎么写才不翻车</h3> <p><code>loading="lazy"是浏览器原生懒加载，但别以为加了就万事大吉；onerror降级看似简单，实际容易堆出重复逻辑。-
loading="lazy"对首屏关键图有害，首页 banner、logo 等必须删掉这个属性，否则可能被延迟渲染 -
onerror只适合单图调试，批量处理要用 JS 监听：用document.querySelectorAll('img').forEach(...)统一绑定，避免内联 JS 污染 HTML - 开发阶段快速排查坏图：在控制台跑
Array.from(document.images).filter(i => i.naturalWidth === 0)，立刻列出所有加载失败项 - 占位图推荐用
data:URI 内联 SVG，比 HTTP 请求更快，例如onerror="this.src='data:image/svg+xml;utf8,<svg xmlns='\"http://www.w3.org/2000/svg\"' width='\"100\"' height='\"100\"' viewbox='\"0'><text x='\"50%\"' y='\"50%\"' dominant-baseline='\"middle\"' text-anchor='\"middle\"'>✕</text></svg>'"
真正卡住性能的往往不是技术选型，而是
sizes估算不准、srcset缺少中间档位、或忘了给<picture></picture>补全media覆盖——这些细节不盯住，高清图照样拖垮小屏体验。 -
