1) 形式の概要
- JPEG：写真、ロッシー、透明度なし。
- PNG：透明度、ロスレス、大きいサイズ。
- WebP：ロスレス/ロッシー、透明度、優れた圧縮。
- SVG：ベクター、スケーラブル、ロゴ/アイコン。
- AVIF：最高の圧縮、新しい、サポートが増加中。
2) 使用例
写真：WebP > JPEG。ロゴ：SVG > PNG。アイコン：SVG > PNG。スクリーンショット：PNG またはWebP。
3) ブラウザサポート
WebPは広くサポート（Safari 14+）。AVIFは新しい（Chrome 85+、Firefox 93+）。フォールバックまたは機能検出を使用してください。
4) ファイルサイズ対品質
WebPは通常JPEGより25-35%小さく、AVIFはさらに小さい。品質を視覚的にテストし、圧縮を調整します。
5) 透明度のニーズ
アルファチャンネルが必要な場合：PNG、WebP、AVIF、SVG。JPEGは透明度をサポートしません。
6) レスポンシブ画像
srcset と picture 要素を使用して、異なるブラウザと画面に異なる形式/サイズを提供します。
7) ツールと変換
Orquiなどのツールで形式間を変換し、品質とサイズを比較します。自動化のためにビルドパイプラインを使用します。