画像フォーマット別の特徴と選択基準
適切なフォーマットと圧縮設定を選ぶことは、ページ読み込み速度・視覚品質・ストレージコストに大きく影響します。正しいフォーマットを選ぶだけで同等の品質のまま最大50〜70%のファイルサイズを削減できます。
フォーマット早見比較
JPEG：写真に適した不可逆圧縮形式で最も互換性が高い。PNG：透明度対応の可逆圧縮でロゴ・アイコン・スクリーンショットに最適。WebP：JPEGとPNG両方の長所を持ち容量が小さくWebで最も推奨。AVIF：WebPよりさらに小さい次世代形式だが旧ブラウザは非対応。SVG：ベクターグラフィックでどのサイズでも鮮明、アイコン・ロゴに最適。
Web高速化のポイント
次世代フォーマット（WebP・AVIF）を優先し<picture>タグでJPEGフォールバックを用意してください。フォールドより下の画像にはloading="lazy"を追加してLCP（最大コンテンツの描画）を改善しましょう。srcsetで解像度別の画像（1x・2x・3x）を提供すると高DPRデバイスでも鮮明に表示されます。
よくある質問
Squoosh（Google製・無料・ブラウザベース）が手軽で高機能です。TinyPNGやImageOptim（Mac）もよく使われます。ビルドパイプラインにはSharp（Node.js）やImageminを組み込んで自動化できます。
はい。アニメーションにはアニメーションWebPやMP4/WebM動画がGIFより大幅に小さいファイルサイズで高品質を実現します。UIアニメーションにはLottie（JSONベース）も非常に効果的でベクターなのでスケーラブルです。
2024年時点でChrome・Firefox・Safari 16.4+に対応しています。<picture>でAVIF→WebP→JPEGの順にフォールバックを用意すれば、各ブラウザが対応している最良フォーマットを自動的に読み込みます。