画像フォーマット早見表 — JPG vs PNG vs WebP vs AVIF
各フォーマットの使い分け方、ファイルサイズ比較、クイック判定ツリー
間違った画像フォーマットを選ぶことは、サイト速度にとって最も安上がりなミスです。AVIFは同じ見た目の品質でJPGより50%小さくなることがありますが、切り替えが常に得策とは限りません。ここに判定ツリーを示します。
10秒ルール
- 写真、透明度不要 → WebP(または、ユーザーがモダンブラウザのみの場合はAVIF)。
- 写真、どこでも動作が必要 → JPG。
- ロゴ、スクリーンショット、アイコン → PNG(または、同じロスレス品質でファイルサイズを小さくしたい場合はWebP)。
- アニメーション → WebP(GIFの代替、30~50%小さく)。
- ベクターアート(ロゴ、アイコン) → SVG(このリストにはありませんが、可能な場合はSVGを使用)。
完全比較
| フォーマット | 最適な用途 | 非可逆圧縮 | 透明度 | アニメーション | ブラウザ対応 |
|---|---|---|---|---|---|
| JPG | 写真、アルファなし | あり | なし | なし | 100% |
| PNG | シャープなグラフィック | なし | あり | なし | 100% |
| WebP | 写真+グラフィック | 両方 | あり | あり | 97%(2026年) |
| AVIF | 最高圧縮 | 両方 | あり | あり | 92%(2026年) |
実際のファイルサイズ比較
同じ1920×1080の写真、同じ見た目の品質:
- JPG(品質80) — 340 KB
- WebP(品質80) — 210 KB(38%小さい)
- AVIF(品質60) — 165 KB(51%小さい)
- PNG(ロスレス) — 2.4 MB(7倍大きい — 写真には絶対に使わない)
無料ツールで画像を変換:
画像ライブラリ全体を一括ZIP圧縮するには、一括処理モードを使用して、数百枚の画像を一度に変換できます。
無料ツールをお試しください
これらのガイドのほとんどは、今すぐ使える実践的なツールと連携しています — 初回はサインアップ不要:
- 画像リサイズツール — ピクセル単位のダウンスケール+アップスケール。
- WebPに変換 — JPGより30~50%小さいファイル。
- 背景削除ツール — ワンクリックで切り抜き、透明PNG。
- ファビコン生成ツール — 1つのソースからすべてのブラウザサイズに対応。
- ソーシャルメディアリサイズツール — 各プラットフォームの正確な寸法。
- 一括処理 — 最大200枚の画像に任意のツールを一度に適用。
全ツールカタログを参照。