JPEG / PNG / WebP / AVIF / JXL の選び方
5つのフォーマット、5つの異なるトレードオフ。本ガイドでは、それぞれが実際にどう圧縮するのか、どこで破綻するのか、そして迷わず選ぶ方法を解説します。
結論を一行で
互換性を最優先する写真には JPEG、安全な現代的デフォルトとしては WebP、可能な限り小さいファイルが欲しいときは AVIF、そして画像に鋭いエッジや文字、透過がある場合は PNG を使ってください。現代的なアーカイブ向けフォーマットが必要で、開くソフトウェアを自分で管理できるなら JXL を選びましょう。
各フォーマットの圧縮の仕組み
JPEG — 万能の定番
JPEG は 1992 年以来ずっと写真の既定フォーマットであり、いまでもあらゆるツール、ブラウザー、プリンターが理解する形式です。非可逆圧縮で、画像をブロックに分割し、周波数データへ変換したうえで、人の目が最も鈍い高周波のディテールを捨てます。だから品質を下げすぎると、エッジ周辺に特徴的なブロックノイズやリンギングが現れます。
長所: 写真でファイルが非常に小さく、対応範囲が最も広く、エンコードもデコードも速い。短所: 透過を扱えず、鋭いエッジや文字は苦手で、保存のたびに劣化します。同じ JPEG を何度も再圧縮しないでください。
PNG — 可逆圧縮という誇り
PNG はすべてのピクセルを正確に保存します。予測フィルターと DEFLATE を組み合わせるため、広い領域が繰り返す場合によく圧縮できます。単色の面、UI、スクリーンショット、図表、ロゴなどです。JPEG にはできない完全なアルファ透過もサポートします。
長所: ピクセル単位で正確な出力、透過、文字やラインアートに最適。短所: 写真の圧縮は非常に苦手で、同じ写真を PNG で保存すると JPEG の 5〜10 倍になることも珍しくありません。なお PNG の出力は常に可逆なので、画質の劣化を一切許容できないときの安全な選択肢です。
WebP — 現実的な中間解
WebP は Google が JPEG と PNG を置き換える改良として設計したもので、両方の役割をこなします。写真向けの非可逆モードとグラフィック向けの可逆モード、さらにアルファ透過も備えます。実際には、非可逆 WebP は同等の品質で JPEG より 25〜35% 小さくなることが多く、現在のすべてのブラウザーが対応しています。
長所: 広い対応範囲でしっかり容量を削減でき、非可逆モードでも透過を扱えます。短所: 一部の古い、あるいはニッチなツールでは開けないことがあり、可逆 WebP が最適化済み PNG より常に優れるわけではありません。
AVIF — 最小のファイル
AVIF は AV1 ビデオコーデックを基盤にしており、今日広く使われている中で最も効率のよいフォーマットです。JPEG と比べると、同じ見た目の品質ではるかに小さいファイルを生成し、多くの場合およそ半分のサイズになります。透過、広色域、HDR にも対応します。
長所: 明確な差で最高の圧縮率、現代的な機能。短所: エンコードが遅く（1 枚あたりミリ秒ではなく秒単位）、非常に古いブラウザーでは表示できません。大量の画像を扱うとき、我慢が最も報われるフォーマットです。
JXL — 現代のアーカイブ向け選択肢
JPEG XL（JXL）は JPEG の後継として設計されました。非可逆と可逆の両モード、完全なアルファ透過、広色域、HDR、プログレッシブデコードに対応します。同等の品質では通常 JPEG より小さいファイルになるため、アーカイブや、デコーダーを自分で管理できるパイプラインに向いています。
強み：非可逆と可逆を1つの形式で扱える効率的な圧縮、現代的な機能、特許ライセンス料が不要。弱み：高いエフォート設定ではエンコードが遅く、ブラウザーでの表示対応もまだ均一ではありません。Chrome と Firefox は既定で JXL ファイルを表示しないため、オープンな Web で WebP や AVIF を安全に置き換えられる段階ではありません。tinyimg は JXL のエンコードとデコードに対応していますが、閲覧環境を先に確認してください。
横並びの比較
| フォーマット | 圧縮 | 透過 | 最適な用途 | 注意点 |
|---|---|---|---|---|
| JPEG | 非可逆 | なし | 写真、最大の互換性 | 低品質でノイズ、再保存で劣化 |
| PNG | 可逆 | あり | スクリーンショット、UI、ロゴ、文字 | 写真では非常に大きい |
| WebP | 両方 | あり | 汎用的な現代的デフォルト | ツール対応に穴があることがある、可逆は PNG に劣ることが多い |
| AVIF | 両方 | あり | 最小サイズ、画像の多いサイト | エンコードが遅い、新しいブラウザーが必要 |
| JXL | 両方 | あり | アーカイブ、高品質な写真、管理されたパイプライン | エンコードが遅い、ブラウザー表示の対応が不均一 |
画像の正体から選ぶ
- 写真（人物、風景、商品）— エンコード時間を許容できるなら AVIF を優先、そうでなければ WebP。後段のツールがどうしても求める場合だけ JPEG に戻します。
- スクリーンショットや UI モック — PNG、または可逆 WebP。1 ピクセルの鋭い線や文字こそ、非可逆フォーマットがにじむ場所です。
- フラットな色のロゴやアイコン — PNG または可逆 WebP。もともとベクターなら SVG も検討してください。
- 透過が必要な画像 — PNG、WebP、AVIF、JXL のいずれか。JPEG にはそもそもできません。
- すでに最適化し尽くした画像 — そのままに。最適化済みのファイルを再エンコードすると、しばしば大きくなります。
Web での実用的な答え: AVIF と WebP を書き出し、<picture> で JPEG のフォールバックと一緒に配信します。新しいブラウザーは小さいファイルを、古いブラウザーでも画像は表示されます。
フォーマット選びより大事な 2 つのルール
- 圧縮の前にリサイズ。 幅 4000 ピクセルの写真を 800 ピクセルの枠に出すのは、コーデックの差では取り戻せないほどのバイトを無駄にします。サイズの見積もりはWebパフォーマンスガイドで扱っています。
- 原本を残す。 非可逆の保存は何度でも取り返しがつきません。圧縮するのは複製にし、圧縮後のファイルはアーカイブではなくビルド成果物として扱ってください。
自分のファイルで試す
数値は個々の画像に大きく左右されるため、唯一信頼できる基準は自分の手持ちのセットです。tinyimg なら 1 回の処理で複数のフォーマットにまとめて圧縮でき、サイズを並べて比較できます。しかもすべてローカルで動作するので、試している間に何かがアップロードされることはありません。