画像フォーマット比較：JPEG、PNG、WebP、AVIF
現代の Web で画像の 99% 超をこの 4 形式が占めます。圧縮、透過、アニメ、ブラウザ対応でトレードオフがまったく異なります。実務でどれを選ぶかのガイドです。
並べて比較
まず一覧。各形式の詳細は下にあります。
| 項目 | JPEG ? | PNG ? | WebP ? | AVIF ? |
|---|---|---|---|---|
| 圧縮 | 非可逆 | 可逆 | 非可逆＋可逆 | 非可逆＋可逆 |
| アルファ（透過） | なし | あり（8 ビット） | あり（8 ビット） | あり（フル） |
| アニメーション | なし | APNG のみ | あり | あり |
| 最大ビット深度 | 8 ビット | 16 ビット | 8 ビット | 10/12 ビット |
| 写真での典型サイズ（対 JPEG） | 100% | 300〜1000% | 65〜75% | 40〜60% |
| ブラウザ対応 | ほぼすべて | ほぼすべて | Chrome 32、Firefox 65、Safari 14 | Chrome 85、Firefox 93、Safari 16 |
| 典型エンコード速度 | 速い | 速い | 中程度 | 遅い |
JPEG — いちばん広い共通基盤
仕組み
JPEG（Joint Photographic Experts Group）は 1992 年に標準化された 4 形式のなかで最も古いものです。8×8 ブロックへの非可逆 DCT、量子化、エントロピー符号化を使います。品質は 1〜100 の数値で調整します。MozJPEG のような現代エンコーダはビットストリームを変えずに 10〜20% ほど余分に圧縮し、どの JPEG デコーダでも読めます。
向いている用途
なめらかな階調と細部のある写真 — 人物、風景、商品撮影、ヒーロー画像など。
利点
- 地球上の画像ビューアで事実上どこでも表示できる。
- 多くの環境でハードウェアデコードが使える。
- MozJPEG や jpegli など最適化エコシステムが成熟している。
欠点
- アルファがない — 背景は平坦化が必要。
- 文字、線画、鋭い縁でブロックノイズが出やすい。
- チャンネルあたり 8 ビットのみ。
PNG — 可逆と透過
仕組み
PNG（Portable Network Graphics）は 1990 年代半ばに GIF の自由な代替として生まれました。行ごとのフィルタの上に DEFLATE を載せた 厳密に可逆な形式です。oxipng（optipng の Rust 移植）はフィルタと圧縮の組み合わせを総当たりし、1 ピクセルも変えずに最小サイズを探します。
向いている用途
UI 素材、アイコン、スクリーンショット、図表、線画、フラットカラーのロゴ、真のアルファが必要なもの全般。
利点
- 可逆 — 往復後もピクセルが完全一致。
- 8 ビットアルファ、チャンネルあたり最大 16 ビット。
- 対応は事実上ユニバーサル。
欠点
- 写真では巨大になりやすい — JPEG/WebP/AVIF の数倍になることも。
- 元仕様にアニメはない（APNG は後付け拡張）。
WebP — Google の Web ファースト形式
仕組み
WebP は 2010 年に Google が公開し、VP8 動画コーデックをベースに、後から別モードで可逆を追加しました。1 つのコンテナで非可逆・可逆の両方、任意のアルファとアニメに対応します。非可逆では同じ見た目なら JPEG より typical に 25〜35% 小さくなりやすく、可逆では PNG より 20〜30% 小さくなりやすいこともあります。
向いている用途
AVIF がまだ慎重な場面での汎用配信 — 写真、透過のある UI スプライト、GIF の置き換え、AVIF 下のフォールバック層。
利点
- 写真・グラフィック・アルファ・アニメを 1 形式で扱える。
- 同程度の品質なら JPEG や PNG よりかなり小さくなりやすい。
- 2020 年以降の主要ブラウザでは広く使える。
欠点
- チャンネル 8 ビット — HDR には不向き。
- 低スペック端末では JPEG よりデコードが重いことがある。
AVIF — 現行の圧縮効率の筆頭
仕組み
AVIF（AV1 Image File Format）は Alliance for Open Media が 2019 年に出した、AV1 動画コーデックの静止画プロファイルです。最大 12
ビット、フルアルファ、HDR、広色域、フィルムグレイン合成に対応します。参照エンコーダ（libavif が使う
aom-av1）は遅いですが、実写真では今日最強クラスの圧縮を狙えます。
向いている用途
ヒーロー画像、フォトギャラリー、帯域が CPU 時間より重要な場所。<picture> の最上位ソースとしても相性が良いです。
利点
- 圧縮はトップクラス — JPEG 比で typical に 40〜60% 小さくなりやすい。
- アルファ、アニメ、HDR、広色域、10/12 ビットに対応。
- ロイヤリティフリーでオープン。
欠点
- エンコードが遅い — ビルド時や非同期処理を想定したい。
- Safari はバージョン 16（2022）から対応。
- WebP 可逆や PNG に比べ、合成グラフィックでは見た目が不利なことも。
どの形式を使うべき？
- 写真、全幅ヒーロー： 主に AVIF、
<picture>で WebP と JPEG をフォールバック。 - 透過のある UI（アイコン・ロゴ）： 互換のため PNG、容量優先なら可逆 WebP。
- 線画、スクリーンショット、図： PNG（または可逆 WebP）— JPEG/AVIF のエッジ周りのartifactが厳しい。
- アニメ GIF の置き換え： WebP か AVIF — どちらもはるかに小さく、真のアルファも使える。
- 今日すべてのブラウザで 1 形式だけ： 写真は JPEG、グラフィックは PNG。最小ではないが互換の負債はゼロ。
実務では 1 つに決める必要はありません。<picture> の中で AVIF → WebP → JPEG または PNG の順に並べれば、デコードできる最小の版が各ブラウザに届きます。
よくある質問
JPG を WebP に変換するには？
PicBrewery を開き、JPG をアップロード領域にドロップすると、JPEG、PNG、WebP、AVIF が自動生成されます。WebP のタイルを選びダウンロードアイコンを押してください。すべてブラウザ内で、ファイルはアップロードされません。
PNG を AVIF に変換するには？
PNG を PicBrewery にドロップします。JPEG、WebP、AVIF への再エンコードは Web Worker で並列に動きます。AVIF 列からダウンロードするか、複数行を選んで ZIP にまとめ、ソースごとに最も小さかった形式だけを出力できます。
AVIF は WebP より優れている？
写真では同じ見た目なら AVIF のほうが WebP より 20〜30% 小さくなりやすいことが多く、ベースの AV1 のおかげです。WebP はエンコードが速く、古い端末での対応も広めです。どちらか一方が他方を完全に置き換えるというより、組み合わせて使います。
Safari は WebP に対応？
はい。Safari 14（macOS Big Sur、iOS 14、2020 年）からです。現在の Safari は非可逆・可逆の両方の WebP をデコードします。
PNG は常に可逆？
はい。DEFLATE は厳密に可逆で、PNG からデコードしたピクセルはソースとビット一致です。サイズ削減はフィルタや DEFLATE の調整（oxipng など）によるもので、データの破棄ではありません。
JPEG に透過は付けられる？
いいえ。古典的 JPEG にアルファはありません。透過が必要なら PNG、WebP、AVIF を使います。JPEG XL はアルファを持ちますが、ブラウザでの普及は限定的です。
AVIF は JPEG よりどれくらい小さい？
現代的な AVIF エンコーダ（aom / libavif）の典型の写真は、同程度の知覚品質の MozJPEG より 40〜60% 小さくなることが多いです。空や単色が多いグラフィックでは JPEG 自体がよく圧縮するため差は縮まります。
自分のブラウザは AVIF を表示できる？
Chrome 85+、Firefox 93+、Edge 121+、Safari 16+ でサポートされています。古いブラウザ向けには
<picture> で WebP や JPEG をフォールバックにしてください。
PicBrewery は本当にクライアントサイドだけ？
はい。デコードと再エンコードは WebAssembly で Web Worker 内、あなたの端末で行われます。画像バイトはネットに送られません。読み込むのは静的アプリとコーデックだけです。
形式間の変換
特定の変換先をお探しですか？下の組み合わせから選べます。各ページに手順、期待できる容量削減、そのペア向け FAQ があります。