適切な画像形式を選択すると、見た目の品質を損なうことなくページの重量を 50% 以上削減できます。 JPEG、PNG、WebP、AVIF、GIF、SVG がすべて競合する中、どうやって決めるのでしょうか?
TL;DR: 写真や複雑な画像の場合は、デフォルトで WebP になります。シャープなエッジを持つ透明性が必要なグラフィックにはPNG を使用します。アイコンとロゴにはSVG を使用します。フォールバックを提供できる場合は、AVIF を検討してください。
フォーマットごとの内訳
JPEG
30 年間にわたってウェブのデフォルトの写真形式として使用されてきました。写真コンテンツを適切に処理しますが、同じ視覚品質で WebP よりも大きなファイルを生成します。透明感がない。 次の場合に使用します。 電子メールの互換性が最大限に高められている場合、または非常に古いシステム。
PNG
ロスレス形式は、テキストを含むグラフィック、スクリーンショット、アルファ透明度が必要な画像に最適です。写真用に巨大なファイルが生成されます。写真には PNG を決して使用しないでください。
ウェブP
Google によって開発されました。可逆性と可逆性の両方。 JPEG より 25 ～ 35%、PNG より 26% 小さいファイルが生成されます。透明度とアニメーションをサポートします。 2026 年には 97% 以上のブラウザをサポートします。ウェブにとって最高のオールラウンダーです。
AVIF
WebP よりも 20 ～ 50% 小さいファイルを配信する次世代形式。エンコードは遅くなり、ブラウザのサポートは最大 93% になります。 WebP/JPEG フォールバックに最適 <picture>.
GIF
時代遅れです。色は 256 色に制限されており、アニメーションのファイル サイズは膨大です。 WebP アニメーションまたは MP4/WebM ビデオに置き換えると、ファイルが 80 ～ 90% 小さくなります。
ファイルサイズの比較
| 書式設定 | 写真 (1920×1080) | グラフィック (800×600) | 注記 |
|---|---|---|---|
| JPEG (q80) | 285 KB | 145 KB | ベースライン |
| PNG | 2.1MB | 95 KB | グラフィックには最適ですが、写真にはひどいです |
| WebP (q80) | 195 KB | 68 KB | JPEG より ~32% 小さい |
| AVIF (q80) | 142 KB | 52 KB | JPEG より ~50% 小さい |
決定フローチャート
- ロゴ、アイコン、イラスト? → SVG
- 透明性が必要ですか? → WebP (非可逆または可逆) または PNG
- 写真? → WebP (非可逆、q75–85)
- 最大圧縮? → WebP/JPEG フォールバックを使用した AVIF
- メール? → JPEG (最高のメール クライアント サポート)
✅ 複数のフォーマットを提供する方法
HTML を使用する <picture> 要素 <source> AVIF および WebP のタグは、JPEG/PNG にフォールバックします。 <img> タグ。ブラウザは、サポートする最初の形式を選択します。
結論
2026 年のほとんどの Web サイトでは、WebP が正しいデフォルトです。圧縮、品質、ブラウザのサポート、機能の最適なバランスを提供します。シャープなエッジの透明度には PNG を使用し、ベクトルには SVG を使用し、パフォーマンスが重要なページには AVIF を検討してください。