srcset + sizes 是最直接、浏览器支持最广的响应式图片方案，95%以上现代项目适用；它让浏览器在请求阶段就选择合适尺寸资源，避免纯CSS缩放导致的大图下载浪费。
srcset 和 sizes 是最直接、浏览器支持最广的响应式图片方案，95% 以上的现代项目用它就够了。别一上来就套 <picture>，多数时候是过度设计。
什么时候必须用 srcset + sizes 而不是只写 max-width: 100%
纯 CSS 缩放（max-width: 100%; height: auto）只是让大图“看起来小”，实际仍下载原图——4K 屏上加载 4MB 的 large.jpg，再缩成 300px 宽，浪费带宽又拖慢首屏。而 srcset + sizes 让浏览器在请求阶段就选对尺寸。
-
srcset列出真实宽度资源："small.jpg 480w, medium.jpg 800w, large.jpg 1200w"，单位w指图片原始像素宽度，不是 CSS 像素 -
sizes必须同步提供布局信息，比如sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"，否则浏览器无法估算显示宽度，大概率 fallback 到src - 漏写
sizes是常见坑：Chrome DevTools 的 Network 面板里能看到明明写了srcset却始终加载最大图，八成是sizes缺失或语法错（比如括号不匹配、逗号后多空格）
<picture> 真正该用的三个场景
<picture> 不是 srcset 的升级版，而是解决它搞不定的问题。强行套用反而增加维护成本、降低可读性。
- 艺术方向切换：移动端要竖构图裁剪版，桌面端要横构图全图——
<source media="(max-width: 768px)" srcset="hero-mobile.jpg">+<source media="(min-width: 769px)" srcset="hero-desktop.jpg"> - 格式优先级控制：想默认用
webp，但 Safari 旧版/IE 不支持，需降级到jpeg：<source srcset="photo.webp" type="image/webp">必须写在<source srcset="photo.jpg" type="image/jpeg">前面 - 高 DPR 设备强制加载高清图：当设计稿明确要求 Retina 屏必须显示 2x 图，且不能依赖浏览器自动选择时，用
srcset="low.jpg, high.jpg 2x"放在<img>里更轻量；<picture>在这里没优势
onerror 和懒加载的实际配合方式
响应式图片路径多、版本杂，加载失败不易定位。onerror 不是装饰，是调试刚需；但和 loading="lazy" 共存时有隐性冲突。
立即学习“前端免费学习笔记（深入）”；
- 单图调试加
onerror="this.src='data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 100 100\'%3E%3Ctext x=\'10\' y=\'50\' font-size=\'12\'%3EFAIL%3C/text%3E%3C/svg%3E'; this.title='Failed: '+this.src;"，失败时显示 SVG 占位并标出原始路径 -
loading="lazy"会延迟触发onerror直到进入视口，导致控制台看不到早期错误；开发期建议先关掉 lazy，上线前打开 - 批量监控别用
document.querySelectorAll('img').forEach(...)，改用document.addEventListener('error', e => { if (e.target.tagName === 'IMG') { /* 处理 */ } }, true)，捕获更早、更全
真正难的不是写对语法，而是搞清每张图的使用上下文：它是 banner 主图？列表缩略图？还是头像小图标？不同角色对清晰度、加载时机、裁剪自由度的要求天差地别。把 srcset 当万能膏药贴满页面，反而会让关键图得不到最优资源。
