PNG vs WebP vs AVIF｜画像フォーマットの選び方と変換方法
カテゴリ：画像・パフォーマンス
Web サイトの表示速度を左右する最大の要因のひとつが画像フォーマットの選択です。2026 年現在、主要な選択肢は PNG / JPEG / WebP / AVIF の 4 つ。本記事ではそれぞれの特徴・用途・ブラウザ対応状況を整理し、最適なフォーマットの選び方を解説します。
フォーマット比較表
| フォーマット | 圧縮方式 | 透過 | アニメーション | 画質 | ファイルサイズ | ブラウザ対応 |
|---|---|---|---|---|---|---|
| PNG | 可逆 (ロスレス) | ✅ | APNG | 最高 (劣化なし) | 大 | 全ブラウザ |
| JPEG | 非可逆 (ロッシー) | ❌ | ❌ | 品質調整可 | 小〜中 | 全ブラウザ |
| WebP | 可逆 / 非可逆 | ✅ | ✅ | JPEG より良い | JPEG の 25-35% 小 | 95%+ |
| AVIF | 非可逆 / 可逆 | ✅ | ✅ | WebP より良い | WebP の 20% 小 | 92%+ |
どのフォーマットを選ぶべきか
PNG を選ぶケース
- ロゴ・アイコン・スクリーンショットなど劣化が許されない場合
- テキストが含まれる画像 (圧縮でボケると読みにくくなる)
- 透過が必要でかつ IE11 対応が必要な場合 (ほぼ不要)
JPEG を選ぶケース
- 写真・グラデーションが多い画像で 最大互換性 が必要な場合
- メール添付や旧デバイスに配信する場合
WebP を選ぶケース (推奨)
- Web サイトのほとんどの画像 — JPEG と比べ 25〜35% 小さくなる
- 透過 + 圧縮の両立 (PNG の代替)
- アニメーション (GIF の代替 — はるかに小さい)
- ブラウザ対応率 95%+ なのでほぼ問題なし
AVIF を選ぶケース (最先端)
- 最小ファイルサイズ を追求する場合 — WebP よりさらに 20% 小さい
- 高品質な写真をなるべく軽くしたい場合
- ブラウザ対応率 92%+ (Safari 16+, Chrome 85+, Firefox 93+)
実装パターン: picture 要素で出し分け
最も堅実なのは <picture> 要素で複数フォーマットを指定する方法です。ブラウザが対応する最初のソースを選びます。
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description" loading="lazy">
</picture>この方法なら AVIF 対応ブラウザは AVIF を、WebP のみ対応なら WebP を、どちらも非対応なら JPEG をロードします。
ツールで変換する
DevLab の画像フォーマット変換ツール を使えば、ブラウザだけで PNG ⇄ WebP ⇄ JPEG ⇄ AVIF の変換ができます。品質スライダーでファイルサイズと画質のバランスを確認しながら変換可能。サーバーへのアップロードも不要で、プライバシーも安心です。
関連: EXIF ビューア で撮影メタデータの確認や位置情報の削除、画像 → Base64 変換 でインラインの Data URL 生成もできます。
まとめ
- 迷ったら WebP — バランス最良
- さらに小さくしたいなら AVIF (picture でフォールバック)
- 劣化不可なら PNG
- 最大互換性が必要なら JPEG