WebP vs JPG vs PNG vs AVIF — どの形式をいつ使うか (2026)
Tomoda Hinataツール作者・運営公開 2026年4月26日約7分
どこにでも届けたい写真は JPG。透過や非可逆ロスを許せないグラフィックは PNG。今日の Web 配信は WebP (Safari 14 以降のすべてのブラウザがネイティブ対応)。Outlook 対応を捨てて -30% を取れる場面では AVIF。本記事は 4 形式をファイルサイズ・ブラウザサポート・用途別フィットでクロス比較し、ブラウザ内 比較ツールで自分の画像でも検証できる数値を提示します。
このガイドで使うツール
4 形式の概要
JPG (1992) は不可逆、透過なし、万能 — あらゆるメールクライアント、プリンタ、カメラがネイティブで JPG を書きます。PNG (1996) は完全アルファ付き可逆で、ロゴやスクショに最適だが、写真としては JPG の約 5 倍のサイズ。WebP (2010、Google) は不可逆 + 可逆 + アルファを統合、同等画質で JPG より 25〜35% 軽量。AVIF (2019、AV1 コーデック) は最新で、WebP よりさらに 20〜30% 軽量 — 圧縮力は最強ですが、レガシー対応は最弱。
JPG を選ぶべきタイミング
「現代 Web」より古い配信先や、最後の 30% のバイト節約より万能互換性が重要なときに JPG。メール添付 (Outlook デスクトップは WebP を表示できない)、印刷納品 (どのプリンタも JPG を理解する)、Word/PowerPoint への埋め込み、技術寄りでない受信者への手渡し、すべて JPG。写真は品質 78 が最適点、テキスト入りスクショは品質 90。
PNG が本当に勝つのは?
PNG が JPG にない 3 つの強みを発揮するとき: 透過 (色背景に乗るロゴ)、ピクセルパーフェクトなエッジ (UI スクショ、コードモックアップ、細線図)、可逆性 (後で再編集する画像)。写真には PNG は無駄 — 1080p 写真の PNG は同等品質 JPG の約 5 倍のバイト数で、見た目の差はゼロ。アイコンや単純グラフィックには PNG-8 (パレット)、ロゴや複雑な透過には PNG-24 + アルファ。
なぜ WebP が現代 Web の既定なのか
あらゆるモダンブラウザが WebP をネイティブデコード (Chrome 32+、Firefox 65+、Safari 14+、Edge — 2022 年以降グローバルトラフィックの 98% 超)。WebP 写真は同等画質 JPG の 25〜35% 軽量、テキスト入り画像のロスレス WebP は PNG より約 25% 軽量。唯一の弱点は Outlook デスクトップのメール表示 — それ以外の用途では 2026 年現在 WebP が正しい既定値です。
AVIF はどんなときに価値があるか
AVIF (AV1 画像形式) は AV1 動画コーデックのイントラフレーム圧縮を使い、WebP よりさらに 20〜30% サイズ削減を達成します。高解像度ヒーロー画像を多用するグリーンフィールドのコンテンツサイトには有意義。コスト: Outlook デスクトップ、一部の Microsoft アプリ、古い Android Webview や旧 Safari がデコード不可。`<picture>` で WebP フォールバックを敷くか、レガシーがオーディエンス分析で 2% 未満になるまで待つのが現実解。
決定木
Outlook デスクトップで開かれる/メール添付/印刷? → JPG (写真) または PNG (透過必要なグラフィック)。モダン読者の Web アセット? → WebP 写真は品質 82、スクショはロスレス WebP。読者の 98% 超がモダンブラウザで LCP を最小化したい? → `<picture>` で AVIF + WebP フォールバック。Web で透過が必要? → WebP (アルファ) または AVIF (アルファ + さらに軽量) — 新規 Web 制作で PNG を選ぶ理由はありません。
| 形式 | 写真 (1920×1280) | UI スクショ (1920×1080) | ロゴ + 透過 | ブラウザ対応 |
|---|---|---|---|---|
| JPG 品質 82 | 245 KB | (透過なし) | (透過なし) | 100% |
| PNG | 1.65 MB | 92 KB | 11 KB | 100% |
| WebP 品質 82 | 165 KB | 55 KB (ロスレス) | 8 KB | 98% |
| AVIF 品質 60 | 115 KB | 48 KB | 6 KB | 92% |
よくある質問
ブラウザ対応が一番広いのは?
JPG と PNG (100%、過去のすべてのブラウザ)。WebP は約 98% (Safari 14、2020 年以降のすべてのブラウザ)。AVIF は約 92% (Safari 16.4+、全主要モダンブラウザ、ただし古い Android Webview が一部欠落)。
WebP は AVIF より軽い?
いいえ — AVIF は同等画質で WebP より 20〜30% 軽量。WebP は対応の広い既定、AVIF はフォールバック付きで使う「より軽い選択肢」。
なぜ HEIC が比較に入っていない?
HEIC は iPhone の内部保存形式で Web 形式ではありません。ブラウザは HEIC をネイティブデコードできず、メールクライアントもインライン表示しません。Apple は HEVC をデバイス単位でライセンスしています。Web 用には HEIC を JPG/WebP/AVIF に変換しましょう。
ロスレス WebP と不可逆 WebP どちらを選ぶ?
写真は不可逆 (品質 82 が最適点)。スクショ・ロゴ・テキスト入りグラフィックはロスレス WebP — 画質劣化なしで PNG より約 25% 軽量。
TIFF はどう?
TIFF はデスクトップ/印刷/アーカイブ向けで Web 形式ではありません。カメラ RAW 中間ファイルや大判印刷納品に。それ以外は JPG/WebP/AVIF に変換を。
1 つの形式で全部済ませられる?
万能解が必要なら: 写真 JPG、透過グラフィック PNG。両方どこでも動き、圧縮もそこそこ。WebP と AVIF は最適化の追加レイヤー — 高トラフィック Web ページでは大きな意味を持ちますが、たまのアップロードや添付には過剰です。
今すぐ試す
1枚の画像を5フォーマットで並列エンコードし、サイズ・時間を比較
モダン画像フォーマット比較ツール (PNG / JPEG / WebP / AVIF / JXL)