使用 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。瀏覽器會自動選擇它們支援的格式。