画像フォーマット選定の知覚的違い：JPEG vs WebP vs AVIF vs HEIC を写真・イラスト・スクショで比較
「画像は WebP にしておけばよい」「AVIF が一番小さい」と単純化されがちですが、同じ品質設定でも得られる視覚的印象は被写体によって変わります。本記事では JPEG・WebP・AVIF・HEIC の圧縮方式の違いと、写真・イラスト・スクリーンショット・透過 PNG 置き換えなど、用途ごとの選び方を整理します。
4 つのフォーマットの圧縮方式
| フォーマット | コーデック | 圧縮方式 | 得意 | 苦手 |
|---|---|---|---|---|
| JPEG | JPEG (1992) | DCT + 量子化 | 自然画 | エッジ・テキスト |
| WebP | VP8 (2010 派生) | 予測 + 変換 | 自然画・ロスレスも | 細いエッジで歪み |
| AVIF | AV1 (2018) | 高度な予測 + 変換 | 全領域、特に低ビットレート | エンコード時間 |
| HEIC | HEVC (2013) | HEVC イントラ符号化 | スマホ写真 | Web ブラウザ非対応 |
JPEG：写真の伝統的標準
DCT（離散コサイン変換）でブロックごとに周波数領域に変換し、高周波成分を粗く量子化することで圧縮。自然画には強いが、エッジに近い領域でブロックノイズやモスキートノイズが出る。
特性：
- 8x8 ブロック単位の処理
- 圧縮効率は中程度
- 透過なし（PNG / WebP / AVIF が代替）
- プログレッシブ JPEG はインタレース表示可能
WebP：JPEG の Web 向け改良
Google の VP8 動画コーデックを静止画に流用。JPEG より 25-35% 小さいファイルサイズを同等品質で達成（Google ベンチマーク）。
- 透過対応
- ロスレスモード（PNG 代替）あり
- アニメーション対応（GIF 代替）
ただし、極端な低ビットレートでは「ぼやけ」が目立ちやすい性質があります。JPEG が「歪む」のに対し WebP は「ぼやける」傾向。
AVIF：低ビットレートで圧勝
AV1（次世代動画コーデック）の静止画版。JPEG より 50% 以上小さいファイルサイズを同等品質で達成可能。
- 12bit までの色深度
- HDR 対応
- フィルムグレイン合成（ノイズ感を保ちつつ圧縮）
弱点：
- エンコード時間が JPEG / WebP より明らかに長い（10-100 倍）
- ブラウザのデコードも JPEG より重い
- 古い CDN の最適化パイプラインが未対応のことがある
HEIC：スマホ写真の主流フォーマット
Apple iPhone のデフォルト写真形式。HEVC のイントラ符号化を使う。圧縮効率は AVIF と同等以上。
問題はブラウザが対応していないこと（Safari 17+ で部分対応、Chrome / Firefox は非対応）。Web 公開には JPEG / WebP / AVIF への変換が必須。
同じ画像での比較感
「dQ=80（標準的な品質設定）で撮影した同じ JPEG を再エンコード」した場合の典型値：
| 元画像 | JPEG q=80 | WebP q=80 | AVIF q=63 |
|---|---|---|---|
| 自然写真（風景）2000x1500 | 350 KB | 250 KB（71%） | 130 KB（37%） |
| イラスト（フラット） | 200 KB | 90 KB（45%） | 60 KB（30%） |
| スクリーンショット（UI） | 180 KB | 60 KB（33%） | 50 KB（28%） |
| 透過 PNG（ロゴ） | 不可（JPEG は透過なし） | 30 KB | 20 KB |
q は各エンコーダの内部品質パラメータで、AVIF は 0-100 で逆向き（小さいほど高品質）の場合があるので注意。ファイル比較で「画質を揃える」のは難しく、専用のメトリクス（SSIM、VMAF）で比較するのが本来正しい。
被写体別の推奨
写真（自然画）
順位：AVIF > WebP > JPEG
- AVIF は低ビットレートでも破綻しにくい（ノイズが残る代わりにブロックノイズが少ない）
- WebP は中ビットレートで安定
- JPEG は互換性最優先で選ぶときの選択肢
イラスト・ロゴ・フラットなグラフィック
順位：WebP ロスレス > PNG > AVIF
- ロスレスが要る場合は WebP ロスレスか PNG
- AVIF は色のバンディング（グラデーションの段差）が出やすい
スクリーンショット（UI、コード）
順位：PNG > WebP ロスレス > AVIF
- テキストがある画像はロスレスでないと読みにくくなる
- AVIF / WebP のロスレスモードは通常 PNG の半分以下のサイズ
透過が必要
WebP > PNG > AVIF
すべて透過対応だが、WebP のロスレス透過が最もサポート広く高効率。
<picture> 要素での同時提供
新旧ブラウザを同時に対応する標準パターン：
<picture>
<source srcset="hero.avif" type="image/avif" />
<source srcset="hero.webp" type="image/webp" />
<img src="hero.jpg" alt="..." width="1200" height="800" />
</picture>ブラウザは上から順に対応形式を試し、最初に解釈できる形式を使う。WebP / AVIF を提供しつつ、JPEG にフォールバックできる。
CDN 側で Accept ヘッダによる自動配信も可能（Cloudflare Polish、Fastly Image Optimizer 等）。
ブラウザサポート（2026 年）
| フォーマット | Chrome | Firefox | Safari | iOS Safari |
|---|---|---|---|---|
| JPEG | ✓ | ✓ | ✓ | ✓ |
| PNG | ✓ | ✓ | ✓ | ✓ |
| WebP | ✓ | ✓ (65+) | ✓ (14+) | ✓ (14+) |
| AVIF | ✓ (85+) | ✓ (113+) | ✓ (16+) | ✓ (16+) |
| HEIC | ✗ | ✗ | △ (17+ 一部) | △ (17+ 一部) |
WebP は実質全ブラウザ。AVIF も主要ブラウザに行き渡り、フォールバックなしで使える状況が増えている。
エンコード設定の指針
CDN / 自動最適化を使う場合
Cloudflare Polish / Fastly Image Optimizer / Vercel / Cloudinary などが Accept ヘッダで適切な形式を自動配信。手動でフォーマット変換しなくてよい。コストとのバランスで選択。
手動エンコード
- 写真：AVIF q=50-60（cqLevel）または WebP q=80
- イラスト・スクショ：PNG（256 色なら GIF か PNG-8）または WebP ロスレス
- アイコン：SVG（解像度独立で常に最強）
落とし穴
1. 「AVIF にすれば容量半分」は被写体次第
低ビットレート時の AVIF の優位性は写真で顕著。スクショや UI 画像では JPEG / WebP との差が小さいことがあります。盲信せず実測。
2. プログレッシブ JPEG は HTTP/2 と相性が悪い
プログレッシブ JPEG の利点（インタレース表示）は HTTP/1.1 の遅い回線時代の前提。HTTP/2 / 3 のマルチプレックスでは優先度の問題があり、ベースライン JPEG のほうがレンダリングが安定することがある。
3. EXIF と色プロファイル
JPEG / HEIC は EXIF 情報（撮影日時、GPS、カメラ機種）を含みます。Web 公開時は EXIF を削除しないと位置情報などが漏れる。mat2、exiftool -all= などで除去。
色プロファイル（sRGB 以外）も削除すべきかは慎重に。Display P3 の写真をそのまま出す場合は P3 プロファイルを残す。
まとめ
画像フォーマット選定は「サイズ最小化」だけでなく、被写体特性 × ブラウザサポート × エンコード時間 の 3 軸で決めるのが現代的。写真は AVIF、イラスト・ロゴは WebP ロスレスか PNG、スクショは PNG、互換性最優先は JPEG、というのが大筋の指針。複数形式を <picture> で同時提供しつつ、CDN の自動最適化で運用負荷を下げるのが今の標準形です。
画像フォーマットの実際の変換は 画像フォーマット変換ツール で確認できます。