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="説明" loading="lazy">
</picture>
srcset を使用loading="lazy"最適化についての詳細は、Web画像最適化ガイドをご覧ください。
AVIF は最高の圧縮を提供しますが (WebP より 20-50% 優れ、JPEG より 50-80% 優れ)、WebP よりわずかにブラウザサポートが少ないです。WebP はすべてのモダンブラウザでサポートされています (全世界で 95% 以上)。'<'picture> 要素を使って AVIF を一次ソース、WebP をフォールバック、JPEG/PNG を最終フォールバックとして使用してください。
PNG は次の場合に使用します: (1) 透明度/アルファチャンネル、(2) スクリーンショットやテキストが多い画像のロスレス品質、(3) ロゴや図などのシャープなエッジを持つ画像。色データを一部破棄できる写真には JPEG を使用します。
SVG はロゴ、アイコン、イラストに最適です。ベクターベースなのでどの解像度でもシャープで、ファイルサイズも小さいです。SVG が使えない場合 (複雑な写真のようなラスター画像) は透明度付きの WebP または PNG を使用してください。
<picture> 要素を使用します: 最初に <source type='image/avif'>、次に WebP、最後に <img> 要素として JPEG/PNG を配置します。ブラウザは自動的にサポートするフォーマットを選択します。