srcset 列出候选图像及其内在宽度（400w = 400px 宽）。sizes 告诉浏览器图像在不同断点处将显示多宽（这里：600px 以下为完整视口宽度，否则为一半）。sizes 和设备的像素密度来选择看起来仍然清晰的最小图像 — 在下载任何内容之前。手机可能选择 small.jpg；以 50% 宽度显示的 Retina 笔记本可能选择 large.jpg。
<picture>
<source srcset="hero.avif" type="image/avif" /> <!-- modern format -->
<source srcset="hero.webp" type="image/webp" />
<source media="(max-width: 600px)" srcset="hero-cropped.jpg" /> <!-- different crop on mobile -->
<img src="hero.jpg" alt="Hero" /> <!-- required fallback -->
</picture>
浏览器使用它支持/匹配的第一个 <source>。当您需要不同的格式（用 JPEG 回退方案提供 AVIF/WebP）或不同屏幕尺寸的不同裁剪（艺术指导）时使用 <picture> — srcset 单独无法做到的事情。
srcset + sizes。<picture>。提供合适尺寸的现代格式图像是网络性能最大的改进之一 — 它大幅减少移动数据使用量并改进最大内容绘制时间。
这些原生工具让浏览器自动做出最优选择，并为旧浏览器提供妥善的回退方案。