响应式图片实战：srcset 与 sizes 的正确用法

srcset 用 w 描述符告诉浏览器每个候选图的真实宽度，浏览器结合当前视口、像素密度（Retina 屏按 2x/3x 计算）自己挑文件下载：

• <img src="photo-800.jpg" srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w" alt="...">
• 浏览器在 375px 宽的手机上通常选 400w（2x 屏选 800w），在桌面上选 1600w
• src 仍是必须的：不支持 srcset 的老浏览器用它兜底

浏览器选择候选图时，默认假设图片会铺满整个视口宽度。如果图片实际只占半栏（如侧边栏配图、三栏网格），需要用 sizes 告诉它真实显示宽度，否则会选过大的文件：

• sizes="(max-width: 768px) 100vw, 33vw" —— 手机全宽，桌面占三分之一
• sizes 里的 vw 单位相对视口宽度，与 srcset 的 w 描述符配合工作
• 写不准没关系，写个接近的值也比不写强得多

picture 元素解决两个 srcset 覆盖不了的问题：一是新格式回退——优先给支持 AVIF 的浏览器 AVIF，其余回退 WebP 再到 JPG；二是艺术方向——手机竖屏裁切主体、桌面横屏展示全景。

• <picture><source srcset="photo.avif" type="image/avif"><source srcset="photo.webp" type="image/webp"><img src="photo.jpg" alt="..."></picture>
• 浏览器从上往下找第一个支持的 type，都不支持就用最后的 img
• 移动端裁切：在 source 上加 media="(max-width: 768px)" 指向竖版裁切图

响应式图片需要同一张图的多个宽度版本（常见 400/800/1200/1600/2400w）。手动导出五份不现实，正确姿势是构建脚本批量生成，或一次性用工具处理：先用「调整尺寸」把原图缩到目标宽度再压缩，重复几轮即可得到整套 srcset 候选。

生成后记得校验：Chrome DevTools 的 Network 面板切到手机模式刷新，看实际下载的是哪个文件、体积是否符合预期。