WebP と AVIF と PNG と JPEG ウェブ向け画像フォーマットの選定

適切な画像フォーマットを選ばないのは、パフォーマンスを損なう低レベルの原因の一つです。JPEGに適した場面でPNGを使用すると、ページの重さが3〜5倍になります。2025年において、WebPが同等の仕事をするのに30%小さいサイズで実現できるのに、JPEGを提供するのは帯域を無駄にしています。この決定は複雑ではありません — ただ、明確なマップが必要です。

各フォーマットがどのように機能するか、いつ使うべきか、そして次のいずれかを使って変換する方法について説明します。 画像フォーマット変換ツール またはコマンドラインツール。

JPEG

JPEGは1990年代から写真のデフォルトフォーマットとして使われており、その地位は今も維持されています。損失圧縮を使用しており、エンコード中に一部の画像データが削除されます。品質設定が75〜85の範囲では、人間の目には違いが見えません。JPEGは透過性をサポートしていません。

最適な使用場面： 写真、商品画像、複雑なグラデーションを持つイラスト、透過性が必要ないすべての写真コンテンツ。

避けるべき場面： 透過背景が必要な場合、または画像にテキストや鋭いエッジがあり、圧縮アーティファクトが見える場合。

PNG

PNGは損失圧縮を使用しており、すべてのピクセルが正確に保存されます。フルアルファチャンネルをサポートしており、透過性が必要なすべての場面に適しています：ロゴ、UIスクリーンショット、アイコン、オーバーレイ、テキストを含む画像など。

代償としてファイルサイズが大きくなります。写真コンテンツに対して、PNGはJPEGに比べて2〜5倍大きくなります。最も一般的な誤りは、写真をPNGとして保存することです。それは「よりきれいに見える」と思っているだけです。実際には、よりきれいに見えません — ただ、まだ圧縮されていないだけです。写真に透過性が不要であれば、PNGは誤ったフォーマットです。

最適な使用場面： スクリーンショット、UI資産、ロゴ、アイコン、透過性が必要なすべての画像。

避けるべき場面： 透過性が不要な写真を提供する場合。

ウェブP

WebPは2010年にGoogleによってリリースされ、現在ではほぼすべてのブラウザでサポートされています（2025年現在、97%以上）。損失圧縮および損失なし圧縮、フル透過性、アニメーションをサポートしており、JPEGおよびPNGの機能を1つのフォーマットで網羅しています。

同等の視覚品質において、JPEGに比べて約25〜35%の圧縮効果があります。損失なし用途では、WebPファイルは常にPNGよりも小さいです。現代のウェブサイトにおいて、WebPを避けるための意味のある互換性上の理由はもうありません。

最適な使用場面： JPEGおよびPNGのすべての用途に適した代替フォーマット。写真、UI資産、かつてのフォーマットに従っていた場面すべてに適用できます。

AVIF

AVIFはAV1ビデオコーデックから派生しており、すべての主要なウェブ画像フォーマットの中で最も効率的な圧縮を提供しています — 類似の視覚品質において、WebPよりも20〜50%小さいサイズです。HDRカラーフォーマット、広色域、アルファチャンネルの透過性をサポートしています。

ブラウザサポートは世界中で約93%です。主な課題はエンコーディング速度です。AVIFのエンコーディングはWebPに比べて明らかに遅く、ただしツールの開発は急速に進んでいます。ほとんどの生産ワークフローでは、オフラインでAVIFを生成し、静的に提供します — エンコーディング時間はページロード時間に影響しません。

最適な使用場面： 高品質の写真、ヒーロー画像、圧縮効果がオフラインエンコーディング時間よりも優れている場面。

GIF、SVG、そしてその他

画像 機能的には廃れています。256色の制限と劣った圧縮により、アニメーションでは普通にしか使えず、写真にはまったく使えません。WebPアニメーション、CSSアニメーション、そして <video> すべてがより良い結果を提供し、より小さいサイズで実現できます。新しいプロジェクトではGIFを使用しないでください。

SVGA はラスターフォーマットではなく、ベクター形状を記述するXMLマーカーです。アイコン、ロゴ、スケーラブルな線描イラストに適しています。スケーラブルに大きさを変更してもぼやけずに表示される必要があります。写真や現実的な画像には適していません。

フォーマット比較の概要

形式	ロスレス	透明性	ブラウザのサポート	最適な用途	ファイルサイズとJPEGの比較
JPEG	はい	いいえ	100%	写真、グラデーション	基本
PNG	いいえ	はい	100%	スクリーンショット、UI、アイコン	2〜5倍大きい
ウェブP	どちらも	はい	97%+	すべての用途に適した現代の代替	約30%小さい
AVIF	どちらも	はい	93%+	高品質の写真	約45%小さい
画像	いいえ	はい（1ビット）	100%	古くからのアニメーションのみ	避ける
SVGA	該当なし	はい	100%	アイコン、ロゴ、イラスト	該当なし

フォーマット間の変換方法

インストールをしないで画像を変換する最も速い方法は、次の IO Tools画像変換ツール です。JPEG、PNG、WebP、AVIF、GIFなどに対応しており、ファイルをアップロードし、出力フォーマットを選択してダウンロードできます。サポートされるフォーマットについてはブラウザ内で処理され、AVIFについてはサーバー側処理が行われます。

バッチ処理またはビルドパイプラインの場合に、 ffmpeg およびImageMagickは標準的なツールです。

# Convert to WebP (ffmpeg)
ffmpeg -i input.jpg -quality 85 output.webp

# Convert to AVIF (ffmpeg)
ffmpeg -i input.jpg -c:v libaom-av1 -crf 30 output.avif

# Convert to WebP (ImageMagick)
convert input.png -quality 85 output.webp

# Batch convert all JPEGs to WebP
for f in *.jpg; do convert "$f" -quality 85 "${f%.jpg}.webp"; done

変換後、さらにファイルサイズを減らすために IO Tools画像圧縮ツール を使用できます。デプロイ前に追加のバイトを削減するために、もう一度変換を実行せずに使用できます。

現代のフォーマットをサポートするためのフォールバック

の <picture> 要素を使用することで、能力のあるブラウザにAVIFおよびWebPを提供し、古いブラウザにはJPEGにフォールバックできます。ブラウザは最初にサポートするフォーマットを選択します。 <source> これにより、サポートされている場面で最大の圧縮を実現できます。AVIFをサポートするブラウザに、WebPを2番目に、JPEGを最終的にフォールバックとして提供します。この

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero image" width="1200" height="600">
</picture>

タグは検索エンジンやスクリーンリーダーによってインデックスされ、読み取られます — それに応じてテキストを入力してください。 <img> 決定の概要 alt 透過性のない写真

→ WebP（またはパフォーマンスを最適化する必要がある場合にAVIF + WebPのフォールバック）

• 透過背景 → WebP（必要に応じてPNGを使用）
• ロゴ、アイコン、イラスト → SVG
• UIスクリーンショットまたは図解 → PNG
• 最大のブラウザ互換性 → JPEG + PNG
• 最大のパフォーマンス → AVIF + WebPのフォールバックを
• 短い答え：写真やUI資産にはWebP、ベクターにはSVGをデフォルトに設定してください。パフォーマンスが非常に重要であればAVIFを追加してください。特定の理由がある場合にのみJPEGやPNGを使用してください — デフォルトの選択とはなりません。 WebP vs AVIF vs PNG vs JPEG：ウェブ向け画像フォーマットの選択 1 <picture>

短い答え：写真やUI資産についてはWebPに、ベクター画像についてはSVGにデフォルトで使う。AVIFも追加する。 <source> パフォーマンスが重要である場合に。特定の理由がある場合にのみJPEGやPNGを使用する。デフォルトとして選ぶべきではない。

あなたも好きかもしれません