画像形式比較表（PNG/JPG/WebP/AVIF/GIF）
Web開発やアプリ開発でよく使われる画像形式の特徴を比較表にまとめました。用途に応じた最適な形式の選定にお役立てください。
画像形式の比較一覧
以下の表は、主要な画像形式の機能と特性を一覧で比較したものです。圧縮方式、透過（アルファチャンネル）対応、アニメーション対応、ブラウザサポートなどを確認できます。
| 形式 | 圧縮方式 | 透過 | アニメーション | 色深度 | ブラウザ対応 |
|---|---|---|---|---|---|
| PNG | 可逆圧縮 | 対応（8bitアルファ） | APNG（限定的） | 最大48bit + 16bitアルファ | 全ブラウザ |
| JPEG | 非可逆圧縮 | 非対応 | 非対応 | 24bit（約1677万色） | 全ブラウザ |
| WebP | 可逆 / 非可逆 | 対応（8bitアルファ） | 対応 | 24bit + 8bitアルファ | 主要ブラウザ対応（IE非対応） |
| AVIF | 可逆 / 非可逆 | 対応（8/10/12bitアルファ） | 対応（AVIF Sequence） | 最大12bit HDR | Chrome/Firefox/Safari 16.4+ |
| GIF | 可逆圧縮（LZW） | 1bit（透明/不透明のみ） | 対応 | 8bit（256色） | 全ブラウザ |
ファイルサイズ比較
同じ画像を異なる形式で保存した場合のファイルサイズ目安です。実際のサイズは画像の内容や圧縮設定によって大きく変わります。
| 形式 | 写真（相対サイズ） | イラスト（相対サイズ） | スクリーンショット（相対サイズ） |
|---|---|---|---|
| PNG | 大 | 中 | 中 |
| JPEG（品質80） | 小 | 中〜大 | 中 |
| WebP（品質80） | 極小 | 小 | 小 |
| AVIF（品質60） | 極小 | 極小 | 極小 |
| GIF | 非推奨 | 大（256色制限） | 大 |
各形式の詳細と使いどころ
PNG（Portable Network Graphics）
可逆圧縮のため画質の劣化がなく、アルファチャンネルによる透過処理が可能です。ロゴ、アイコン、スクリーンショット、テキストを含む画像など、精密な描画が必要な場面に適しています。ただし写真のような自然画像ではファイルサイズが大きくなる傾向があります。
- 最適な用途：ロゴ、アイコン、スクリーンショット、透過が必要な画像
- 避けるべき用途：写真（ファイルサイズが不必要に大きくなる）
JPEG（Joint Photographic Experts Group）
非可逆圧縮により、写真やグラデーションの多い画像を効率よく圧縮できます。品質パラメータ（0〜100）で圧縮率と画質のバランスを調整可能です。透過やアニメーションには対応していません。Exif情報（撮影日時、カメラ情報）を保持できます。
- 最適な用途：写真、自然画像、グラデーション
- 避けるべき用途：テキスト画像、ロゴ（圧縮アーティファクトが目立つ）、透過が必要な画像
WebP
Googleが開発した画像形式で、JPEGと比較して25〜34%、PNGと比較して26%程度ファイルサイズを削減できます。可逆・非可逆の両方に対応し、アルファチャンネルとアニメーションもサポートしています。IE以外の主要ブラウザで対応済みです。
- 最適な用途：Webサイト全般（写真もイラストも対応）
- 避けるべき用途：IE対応が必要な場合、印刷用途
AVIF（AV1 Image File Format）
AV1動画コーデックをベースとした次世代画像形式です。WebPよりもさらに高い圧縮効率を持ち、HDR（High Dynamic Range）にも対応しています。エンコード速度がやや遅いという課題がありますが、画質とファイルサイズのバランスは最も優れています。
- 最適な用途：高圧縮が求められるWebサイト、HDR画像
- 避けるべき用途：古いブラウザのサポートが必要な場合、リアルタイムエンコードが必要な場合
GIF（Graphics Interchange Format）
256色までの制限がありますが、アニメーションに対応した歴史の長い形式です。現在では動画やWebP/AVIFアニメーションに置き換わりつつありますが、互換性の高さからSNSやメッセージアプリでの短いアニメーションに引き続き使われています。
- 最適な用途：短いアニメーション、レガシーシステム対応
- 避けるべき用途：写真、高画質が必要な画像（256色制限のため）
Web開発での推奨プラクティス
モダンなWebサイトでは、<picture>要素を使用して複数の画像形式をフォールバック付きで提供するのがベストプラクティスです。
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="説明文">
</picture>この記述により、AVIFに対応したブラウザではAVIF、WebP対応ブラウザではWebP、それ以外ではJPEGが表示されます。DevLabでは各形式のテスト用画像ファイルを提供していますので、形式変換やサイズ比較の検証にご利用ください。