srcset、sizes 和 picture 如何提供响应式图像？

• srcset 列出候选图像及其内在宽度（400w = 400px 宽）。
• sizes 告诉浏览器图像在不同断点处将显示多宽（这里：600px 以下为完整视口宽度，否则为一半）。
• 浏览器结合 sizes 和设备的像素密度来选择看起来仍然清晰的最小图像 — 在下载任何内容之前。

手机可能选择 small.jpg；以 50% 宽度显示的 Retina 笔记本可能选择 large.jpg。

picture — 艺术指导 / 不同格式

浏览器使用它支持/匹配的第一个 <source>。当您需要不同的格式（用 JPEG 回退方案提供 AVIF/WebP）或不同屏幕尺寸的不同裁剪（艺术指导）时使用 <picture> — srcset 单独无法做到的事情。

srcset vs picture — 选哪个？

• 相同图像，只是不同大小 → srcset + sizes。
• 不同格式或不同裁剪 → <picture>。

为什么这很重要

提供合适尺寸的现代格式图像是网络性能最大的改进之一 — 它大幅减少移动数据使用量并改进最大内容绘制时间。

这些原生工具让浏览器自动做出最优选择，并为旧浏览器提供妥善的回退方案。