画像形式完全ガイド — PNG、WebP、AVIF、JPEGはいつ使うべきか

画像形式の選択が重要な理由

Webサイトのパフォーマンスを改善する最も簡単な方法のひとつが、画像の最適化です。Google PageSpeed Insightsでは「次世代フォーマットで画像を配信する」という推奨が頻繁に表示されますが、それには十分な理由があります。画像形式の選択は、読み込み時間、Core Web Vitalsのスコア、そして最終的には検索順位に直接影響します。

基本比較: 主要4形式

JPEG (Joint Photographic Experts Group)

Released: 1992 | Compression: Lossy | Transparency: No

最も古く、最も広く使われている形式です。JPEGは写真や複雑な色を持つ画像に優れています。人間の目では気づきにくい細かなディテールを破棄する非可逆圧縮によって、ファイルサイズを小さくします。その代償として、品質を下げるほど圧縮ノイズが目立ち、JPEGでは透明度を扱えません。

Use JPEG for: 一般的な写真、ソーシャルメディア画像、幅広い互換性が必要な場面

PNG (Portable Network Graphics)

Released: 1996 | Compression: Lossless | Transparency: Yes

PNGの可逆圧縮はすべてのピクセルを保持します。シャープなエッジ、文字、透明度が必要な画像に最適です。その分、ファイルサイズは大きくなります。JPEG写真をPNGとして保存すると、通常は2〜3倍大きくなります。

Use PNG for: ロゴ、UIスクリーンショット、文字を含む画像、透明背景が必要なグラフィック

WebP

Released: 2010 (Google) | Compression: Lossy + Lossless | Transparency: Yes

WebPはJPEGとPNGの両方を置き換えるために設計されました。同等の見た目の品質でJPEGより25〜35%小さいファイルサイズを実現し、透明度にも対応します。つまり、両形式の長所を組み合わせています。アニメーションにも対応しています。

Browser support: 2025年時点で世界全体の96%超。

Use WebP for: 現代的なWebサイトのほぼすべて — 写真、グラフィック、透明度を含む画像

AVIF (AV1 Image File Format)

Released: 2019 | Compression: Lossy + Lossless | Transparency: Yes

AVIFはWebPよりさらに圧縮効率が高く、同等の品質でJPEGより通常50%小さいファイルを実現します。また、HDR (high dynamic range) コンテンツの扱いも他のどの形式より優れています。その代償として、エンコード速度が遅く、ブラウザ互換性はやや低めです。

Browser support: 2025年時点で世界全体の約92%。

Use AVIF for: ヒーロー画像、最大限の圧縮が重要な高トラフィックページ、ビルド時の画像処理パイプラインがあるプロジェクト

判断基準: どの形式を使うべきか

無料の変換方法

オンライン (インストール不要)

• Squoosh (squoosh.app) — Google公式ツール。形式を並べて比較可能
• Convertio — 複数形式のバッチ変換
• remove.bg + download as WebP — 背景削除とWebP書き出しをまとめて実行

コマンドライン

# WebP conversion (requires libwebp / cwebp)
cwebp -q 80 photo.jpg -o photo.webp

# AVIF conversion (requires ImageMagick 7+)
magick photo.jpg -quality 60 photo.avif

Next.js (自動)

next/imageコンポーネントは、ブラウザ対応状況に基づいて最適な形式を自動的に選択します。

import Image from 'next/image'
<Image src="/photo.jpg" alt="Auto-optimized" width={800} height={600} />

AVIF対応ブラウザにはAVIFが配信され、WebP対応ブラウザにはWebPが配信され、それ以外にはJPEGが配信されます。すべて自動です。

実際の効果: 変換前と変換後

もともとJPEGで保存されていたインライン画像5枚を含む典型的なブログ記事の場合:

• 画像の合計容量: 2.1 MB
• WebP変換後 (品質80%): 1.25 MB (−40%)
• AVIF変換後 (品質70%): 0.85 MB (−60%)
• LCP改善 (実測): 0.8s → 0.4s

まとめ

何でもJPEGやPNGにする習慣はやめましょう。2026年現在、WebPはWeb用途の95%以上で安全なデフォルトです。高トラフィックページでは、AVIFを使うひと手間に価値があります。今日から変換を始めれば、パフォーマンスとSEOの改善効果はすぐに現れます。