使用 HTML '<'picture> 元素提供带有自动回退的现代格式 — 浏览器选择它们支持的第一种格式：
<picture> <!-- Best compression (AVIF) — ~95% browser support --> <source srcset="image.avif" type="image/avif" /> <!-- Excellent fallback (WebP) — ~97% browser support --> <source srcset="image.webp" type="image/webp" /> <!-- Universal fallback (JPEG) — 100% support --> <img src="image.jpg" alt="Product photo" width="800" height="600" /> </picture>
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description" loading="lazy">
</picture>
srcset 为不同的视口宽度loading="lazy"更多优化内容请参阅我们的 图片优化指南。
AVIF 提供最佳压缩（比 WebP 好 20-50%，比 JPEG 好 50-80%），但浏览器支持略少于 WebP。WebP 受所有现代浏览器支持（全球 95% 以上）。使用 '<'picture> 元素，以 AVIF 为主要来源，WebP 为备选，JPEG/PNG 为最终备选。
以下情况使用 PNG：(1) 透明度/alpha 通道，(2) 屏幕截图或文字密集图像的无损质量，(3) 带有锐利边缘的图像如标志或图表。对于可以丢弃部分颜色数据的照片，使用 JPEG。
SVG 非常适合标志、图标和插图。它是基于矢量的，在任何分辨率下都清晰，文件大小小。如果不能使用 SVG，可以使用带有透明度的 WebP 或 PNG。
使用 <picture> 元素：首先放 <source type='image/avif'>，然后是 WebP，最后是 <img> 元素的 JPEG/PNG。浏览器会自动选择它们支持的格式。