画像フォーマット比較表 - JPEG/PNG/WebP/AVIF/GIF/BMP の特徴と使い分け
画像フォーマット選択の重要性 - Web パフォーマンスへの影響
Web サイトのパフォーマンスにおいて、画像は最も大きなウェイトを占めるリソースです。HTTP Archive の統計によると、Web ページの総転送量の約 50% を画像が占めています。適切なフォーマットを選択するだけで、画質を維持しながらファイルサイズを 30-70% 削減できる場合があります。これは Core Web Vitals の LCP (Largest Contentful Paint) スコアに直接影響し、Google 検索ランキングにも関わる重要な要素です。
フォーマット選択で考慮すべき要素:
- 圧縮効率: 同じ画質でどれだけファイルサイズを小さくできるか。SSIM (構造的類似性) で客観的に比較可能
- 機能性: 透過 (アルファチャンネル)、アニメーション、HDR 対応、色深度の有無
- 互換性: ブラウザ、OS、画像編集ソフト、メールクライアントでの対応状況
- エンコード/デコード速度: 圧縮・展開にかかる計算コスト。リアルタイム処理では重要な要素
- プログレッシブ表示: 低速回線で段階的に表示できるか
2026 年現在、Web で使用される主要なフォーマットは JPEG、PNG、WebP、AVIF、GIF、BMP の 6 種類です。それぞれに明確な得意分野があり、万能なフォーマットは存在しません。用途に応じた使い分けが、最適なユーザー体験を実現する鍵です。近年は AVIF の台頭により、フォーマット選択の判断基準が変化しつつあります。
JPEG と PNG - 伝統的フォーマットの特徴と限界
JPEG (Joint Photographic Experts Group) は 1992 年に標準化された非可逆圧縮フォーマットです。30 年以上の歴史を持ち、あらゆるデバイス・ソフトウェアで対応している最も互換性の高いフォーマットです。写真やグラデーションを含む画像に最適で、圧縮率を調整することでファイルサイズと画質のバランスを制御できます。
- 色深度: 24 ビット (約 1677 万色)。8 ビット/チャンネル
- 透過: 非対応。背景透過が必要な場合は使用不可
- アニメーション: 非対応
- 圧縮方式: DCT (離散コサイン変換) ベースの非可逆圧縮
- プログレッシブ表示: 対応 (Progressive JPEG)
- 得意分野: 写真、自然画像、グラデーション、肌色の再現
- 苦手分野: テキスト、線画、エッジのシャープな画像 (ブロックノイズが発生)、透過画像
- 最大サイズ: 65,535 × 65,535 px (実質無制限)
PNG (Portable Network Graphics) は 1996 年に GIF の代替として策定された可逆圧縮フォーマットです。圧縮しても画質が一切劣化しないため、テキストや図表、スクリーンショットに最適です。
- 色深度: 最大 48 ビット (RGB) + 16 ビットアルファ。PNG-8 は 256 色パレット
- 透過: 完全対応 (8 ビットアルファチャンネルで 256 段階の半透明)
- アニメーション: APNG として対応 (主要ブラウザで対応済み)
- 圧縮方式: Deflate ベースの可逆圧縮 (フィルタリング + LZ77 + ハフマン)
- プログレッシブ表示: 対応 (Interlaced PNG、Adam7 アルゴリズム)
- 得意分野: テキスト、ロゴ、アイコン、スクリーンショット、透過画像、図表
- 苦手分野: 写真 (ファイルサイズが JPEG の 3-5 倍になる)
WebP と AVIF - 次世代フォーマットの実力と使い分け
WebP は Google が 2010 年に開発したフォーマットで、JPEG と PNG の両方の用途をカバーします。非可逆圧縮と可逆圧縮の両方に対応し、透過やアニメーションもサポートする万能型です。2020 年の Safari 対応により、実用上の互換性問題が解消されました。
- 色深度: 24 ビット (非可逆) / 32 ビット (可逆、アルファ付き)
- 透過: 対応 (非可逆モードでもアルファチャンネル保持可能)
- アニメーション: 対応 (GIF の代替として優秀)
- 圧縮効率: JPEG 比で 25-35% のサイズ削減、PNG 比で 26% 削減
- ブラウザ対応: Chrome、Firefox、Safari、Edge すべて対応 (97%+)
- 最大サイズ: 16,383 × 16,383 px
- エンコード速度: JPEG と同程度。高速
AVIF (AV1 Image File Format) は 2019 年に策定された最新のフォーマットで、動画コーデック AV1 の技術を静止画に応用しています。現時点で最も高い圧縮効率を誇り、HDR にも対応する次世代の本命フォーマットです。
- 色深度: 最大 12 ビット/チャンネル (HDR、広色域対応)
- 透過: 対応
- アニメーション: 対応 (AVIF シーケンス)
- 圧縮効率: JPEG 比で 50% 以上のサイズ削減が可能。WebP より 20-30% 小さい
- ブラウザ対応: Chrome 85+、Firefox 93+、Safari 16.4+。対応率約 92%
- 最大サイズ: 65,536 × 65,536 px
- 弱点: エンコード速度が遅い (WebP の 5-10 倍の時間)。デコードも若干遅い
AVIF はエンコードに時間がかかるため、リアルタイム処理には不向きですが、事前にビルドできる静的サイトでは最適な選択肢です。CDN での動的変換にはコスト (CPU 時間) がかかるため、事前生成が推奨されます。
GIF と BMP - レガシーフォーマットの現在地と代替手段
GIF (Graphics Interchange Format) は 1987 年に CompuServe が開発した古いフォーマットですが、アニメーション機能により現在も広く使われています。SNS やメッセージアプリでの「GIF」は文化的なアイコンとなっていますが、技術的には多くの制約があります。
- 色深度: 最大 8 ビット (256 色)。フルカラー画像には不適
- 透過: 1 ビット透過のみ (完全透明か完全不透明。半透明は不可)
- アニメーション: 対応 (GIF アニメーション)。フレームごとに異なるパレットを使用可能
- 圧縮方式: LZW 可逆圧縮
- 現在の用途: 短いアニメーション、リアクション画像、ミーム、ローディングインジケーター
- 問題点: 256 色制限によるバンディング (色の段差)、ファイルサイズが大きい (同等品質の WebP アニメーションの 3-5 倍)
アニメーション用途では、WebP アニメーションや AVIF アニメーション、あるいは短い動画 (MP4 H.264 / WebM VP9) への置き換えが推奨されます。同じ内容を WebP アニメーションにすると、ファイルサイズが GIF の 30-50% に削減されます。MP4 にすればさらに小さくなりますが、ループ再生やインライン表示に追加の実装が必要です。
BMP (Bitmap) は Microsoft が Windows 用に開発した無圧縮フォーマットです。
- 色深度: 1/4/8/16/24/32 ビット
- 透過: 32 ビット BMP でアルファチャンネル対応
- 圧縮: 基本的に無圧縮 (RLE 圧縮オプションあり)
- 現在の用途: Windows アプリケーション内部、画像処理の中間形式、レガシーシステムとの互換性
- Web での使用: 非推奨。1,920 × 1,080 px の画像で約 6MB になり、実用的でない
フォーマット別の圧縮効率ベンチマーク
同一画像を各フォーマットで圧縮した場合の実測データを示します。テスト画像は 1,920 × 1,080 px の写真 (自然風景) と、同サイズのスクリーンショット (テキスト + UI 要素) の 2 種類で計測しています。
写真 (自然風景、元画像 BMP: 5.93MB):
- JPEG 品質 85: 312KB (SSIM: 0.971)
- WebP 品質 80: 228KB (SSIM: 0.972)
- AVIF 品質 60: 156KB (SSIM: 0.970)
- PNG: 4,210KB (SSIM: 1.000、可逆)
スクリーンショット (テキスト + UI、元画像 BMP: 5.93MB):
- JPEG 品質 85: 487KB (テキスト周辺にノイズあり)
- WebP 可逆: 1,120KB (SSIM: 1.000)
- PNG: 1,580KB (SSIM: 1.000)
- PNG-8 (256 色): 380KB (色数が少ない UI では十分)
このデータから読み取れるポイント:
- 写真では AVIF が圧倒的に効率的。JPEG の半分のサイズで同等の品質を実現
- WebP は JPEG より 27% 小さく、エンコード速度も高速。バランスに優れる
- スクリーンショットでは PNG が最適。JPEG はテキスト周辺のノイズが問題
- 色数が少ない UI 画像では PNG-8 が最も効率的
ベンチマーク結果は画像の内容によって大きく変動します。グラデーションが多い画像では AVIF の優位性がさらに顕著になり、エッジが多い画像では差が縮まる傾向があります。自サイトの画像で実測することが最も確実です。
用途別の最適フォーマット選択ガイド - 実装パターン付き
実務でフォーマットを選択する際の判断フローを整理します。以下のガイドラインに従えば、ほとんどのケースで最適な選択ができます。
- 写真・自然画像: AVIF (対応ブラウザ向け) → WebP (フォールバック) → JPEG (最終フォールバック)
- テキスト・ロゴ・アイコン: SVG (ベクター) → PNG-8 (256 色以下) → WebP 可逆 → PNG-24
- 透過が必要な画像: WebP (非可逆 + アルファ) → PNG-24/32 → AVIF
- アニメーション: WebP アニメーション → MP4/WebM 動画 → AVIF シーケンス → GIF (レガシー対応)
- 印刷用高品質画像: TIFF (無圧縮/LZW) → PNG-24 → JPEG (品質 95% 以上)
- メール添付: JPEG (最も互換性が高い) → PNG (透過が必要な場合)
HTML の <picture> 要素を使えば、ブラウザの対応状況に応じて最適なフォーマットを自動選択できます:
<picture><source srcset="image.avif" type="image/avif"><source srcset="image.webp" type="image/webp"><img src="image.jpg" alt="説明" loading="lazy" decoding="async"></picture>
この記述により、AVIF 対応ブラウザには AVIF を、WebP 対応ブラウザには WebP を、それ以外には JPEG を配信できます。ビルドツール (Sharp、ImageMagick、squoosh-cli) で複数フォーマットを自動生成するパイプラインを構築すると、運用が効率化されます。Next.js、Nuxt.js、Gatsby などのフレームワークには画像最適化機能が組み込まれており、設定だけで自動的に最適フォーマットを配信できます。