画像フォーマット解説：JPEG、PNG、WebP、GIF、SVG、AVIF

最終更新日：June 27, 2026

最適な画像フォーマットは一つではありません。それぞれが異なる問題を解決するために存在しています。JPEGは写真を圧縮し、PNGはシャープなエッジと透明度を保持し、WebPやAVIFはさらに画像を縮小し、SVGはピクセルを失わずにスケーリングでき、GIFはアニメーション化します。どれを選ぶかは好みではなく、コンテンツの決定事項です。本ガイドでは、各フォーマットが何をするのか、そして一つのソース画像から測定された実際のファイルサイズを交えて解説します。

簡易回答：どのフォーマットを使うべきか？

画像のコンテンツと表示場所に合わせてフォーマットを合わせましょう。

コンテンツ	最適なフォーマット	理由
写真（ウェブ用）	WebP または AVIF (+ JPEGフォールバック)	高品質で最もバイト数が少ない
写真（メール/互換性重視）	JPEG	ユニバーサルサポート
透明度を持つシャープなグラフィック、テキスト、UI、ロゴ	PNG または SVG	エッジのぼやけがない
ロゴ、アイコン、イラスト（ベクター）	SVG	無限にスケーリング可能で、非常に小さい
短いアニメーション	AVIF/WebPアニメーション (または GIF)	GIFよりもはるかに小さい
アーカイブ / マスターファイル	PNG または TIFF	非可逆圧縮ではない（ロスレス）

フォーマット間の詳細な比較については、AVIF vs WebP vs JPEGの比較を参照してください。

フォーマットはどう比較されるか？

ファイルサイズの違いは大きく一貫しています。1400×933ピクセルの写真一つを測定した結果が以下です。

フォーマット	設定	サイズ	用途例
PNG	lossless	853 KB	グラフィック、透明度、アーカイブ
JPEG	q85	111 KB	写真、幅広い互換性
WebP	q80	60 KB	最新のウェブでの写真
AVIF	q68	44 KB	写真、最小サイズ、最新ブラウザ向け

PNGの853 KBという値が際立っています。写真をロスレスで保存する場合、JPEGよりも約8倍、AVIFよりも約19倍コストがかかります。これが、技術的には可能であっても、全ページの写真にPNGを使用すべきではない理由です。

同じソース画像に対する JPEG, PNG, WebP, GIF, AVIF フォーマットのファイルサイズ比較

JPEG — 写真のための主力フォーマット

JPEG（1992年）は、写真を扱うためのロッシー（非可逆圧縮）フォーマットです。目にはほとんど見えない高周波ディテールを破棄するため、写真のサイズを劇的に縮小できますが、シャープなテキストや細い線がぼやける原因となります。

最適: 写真、グラデーション、複雑な現実世界のシーン。
避けるべき: テキスト、UIスクリーンショット、シャープなラインアート、透明度が必要なもの（JPEGにはアルファチャンネルがない）。
注意点: 品質70以下では目に見える8×8のブロックノイズが発生しやすい。

ウェブ用の写真には品質80〜85を使用してください。JPEGの圧縮方法を参照してください。

PNG — シャープなエッジと透明度

PNGはロスレスであり、フルアルファチャンネルをサポートしているため、すべてのピクセルとあらゆる透明度を保持します。その代償はファイルサイズです。写真をうまく圧縮できません。

最適: エッジがシャープなグラフィック、テキスト、ロゴ、UIスクリーンショット、透過画像。
避けるべき: 全ページの写真（代わりに WebP/AVIF/JPEG を使用してください — 上の表を参照）。
注意点: 写真ではファイルサイズが巨大になりがちです。フラットなグラフィックには PNG-8 (≤256色) で削減を検討してください。

透明度に関する詳細は、透過画像を作成する方法を参照してください。

WebP — モダンウェブの標準

WebP（2010年）はロッシーとロスレスの両方をサポートし、アルファチャンネルに対応しており、同等の品質でJPEGよりも約25〜35%優れています。最新ブラウザでのサポート率は約98%です。

最適: バイトサイズが重要なウェブ写真および透過ウェブ画像。
避けるべき: メールや非常に古いクライアント（JPEG/PNGのフォールバックを使用）。
使用方法: <picture>要素内でJPEG/PNGのフォールバックを用意する。

AVIF — 最も小さい写真フォーマット

AVIF（2019年）は、AV1ビデオコーデックのイントラフレームツールを利用し、WebPよりもさらに20〜30%優れています。サポート率は約96%であり、増加傾向にあります。

最適: 最小バイトサイズが重要な写真（ヒーローイメージ、LCP）。
避けるべき: エンコード速度を犠牲にできない場合、または非常に古いブラウザ向け（<picture>フォールバックを使用）。
注意点: 品質が非常に低い場合 (<q40) に細かいテクスチャの滲みが発生しやすい。

SVG — スケーリング可能なベクター

SVGはベクターフォーマットです。ピクセルではなく形状を格納するため、シャープさを失うことなく任意のサイズにスケーリングでき、シンプルなアートの場合には極小になります。

最適: ロゴ、アイコン、シンプルなイラスト、スケールする必要があるものすべて。
避けるべき: 写真（SVGは写真を効率的に表現できない）。
注意点: 複雑さ — 詳細なSVGは大きくなる可能性があります。必要に応じてラスタライズしてください。

GIF — アニメーションのレガシー

GIFはアニメーションをサポートし、1ビットの透明度もサポートしますが、256色に制限されており、同じコンテンツの場合、現代のアニメーションフォーマットよりも遥かにサイズが大きくなります。

最適: 現代的な用途はない — WebPまたはAVIFのアニメーションに置き換えるべき。
避けるべき: 色の再現性が重要なもの（256色制限）やサイズに敏感なもの。
注意点: ファイルサイズが大きい傾向があります。3秒間のGIFは、同じクリップのMP4よりも大きいことがよくあります。

プレッシャー下でどう選ぶか？

この簡単な意思決定フローを使用してください。

Decision flow: photograph to WebP/AVIF; non-photo with sharp edges or text to PNG/SVG; transparency needed to PNG/WebP

写真ですか？ → WebP/AVIF（JPEGフォールバック付き）。
透明度が必要ですか？ → PNG または WebP（アルファ対応）。
スケーリングするロゴ/アイコン/イラストですか？ → SVG。
シャープなテキスト/UIですか？ → PNG。
アニメーションですか？ → GIFではなく、WebP/AVIFアニメーション。
メール用ですか？ → JPEGまたはPNG（WebP/AVIFは不可）。

ほとんどすべてのウェブ写真の場合、答えは「JPEGフォールバック付きの WebP または AVIF」です。JPEGが残っているのは、最高の選択だからではなく、単に普遍的な互換性のためだけです。

複数のフォーマットを配信するには？

<picture>要素を使用して、ブラウザがサポートする最適なフォーマットを受け取るようにします。

<picture>
  <source srcset="/img/photo.avif" type="image/avif">
  <source srcset="/img/photo.webp" type="image/webp">
  <img src="/img/photo.jpg" alt="Description" width="800" height="600" loading="lazy">
</picture>

ブラウザはサポートする最初のタイプを選択し、残りのソースを無視します。常にJPEGのsrcを持つ実際の<img>タグを最終的なフォールバックとして保持してください。MDNでの画像フォーマットガイドで現在のブラウザごとのサポートテーブルを確認できます。

よくある間違い

写真にPNGを使用すること。 機能はしますが、ファイルサイズが不必要に8〜19倍大きくなります。
テキストやロゴにJPEGを使用すること。 圧縮によってシャープなエッジがぼやけます。PNGまたはSVGを使用してください。
フォールバックなしで単一フォーマットを配信すること。 AVIF/WebPは古いクライアントのためにJPEGのフォールバックが必要です。
GIFでアニメーション化すること。 WebP/AVIFアニメーションは遥かに小さく、より多くの色をサポートします。
ロゴにSVGを無視すること。 ラスタライズされたロゴは高DPIでぼやけます。SVGはどのサイズでもシャープさを保ちます。

よくある質問

どの画像フォーマットを使うべきですか？

写真にはJPEG、エッジがシャープなグラフィックや透明度が必要なものにはPNG、モダンウェブの標準としてWebP（両方より小さい）、最新ブラウザ向けの最小サイズの写真はAVIF、ロゴやアイコンにはSVGを使用します。コンテンツに合わせてフォーマットを合わせましょう。

WebPはJPEGより優れていますか？

ウェブ配信においては、はい — WebPは同等の品質で25〜35%小さく、すべての現在のブラウザでサポートされています。JPEGは非常に古いブラウザのフォールバックとしてのみ保持してください。WebPコンバーターガイドを参照してください。

AVIFを使うべきなのはどんな時ですか？

エンコードでき、かつオーディエンスが主に最新ブラウザを使用している場合 — AVIFはJPEGよりも約50%小さいです。トレードオフは、エンコード速度の低下と古いブラウザでのギャップです。要素を通じてWebPフォールバック付きでAVIFを配信してください。

PNGは透明度をサポートしていますか？

はい — PNGはフルアルファチャンネルを持っており、これがグラフィックやロゴの透過度のフォーマットである理由です。JPEGは透明度をサポートしません。WebPとAVIFもアルファをサポートしますが、ウェブ配信ではより小さいサイズになります。

写真にとって最も小さいフォーマットはどれですか？

AVIF（最新ブラウザで最小）、次にWebP、そしてJPEGです。PNGはロスレスであるため、写真には最大です。ウェブ配信の場合、WebPが安全なデフォルトであり、エンコードでき、オーディエンスが最新ブラウザの場合はAVIFを使用します。

最も小さい画像フォーマットは何ですか？

最新ブラウザの写真ならAVIF（JPEGより約50%小さい）、次にWebPです。PNGはロスレスであるため、写真には最大です。透明度を持つグラフィックの場合、WebPまたはAVIFがPNGよりも優れています。コンテンツとオーディエンスのブラウザサポートに合わせてフォーマットを合わせましょう。

ロスシー（非可逆）とロスレス（可逆）の違いは何ですか？

ロスレス（PNG、ロスレス WebP）はすべてのピクセルを正確に保持し、完全に元に戻すことができます — 品質が失われることはありません。ロッシー（JPEG、ロスシー WebP、AVIF）は、目にとって最も気づきにくいディテールを破棄してファイルを縮小するため、その損失は恒久的です。写真ではロッシーがサイズ面で優位であり、グラフィック、テキスト、再編集するマスターファイルではロスレスが品質面で優位です。コンテンツによって選択してください。

透明度を持つグラフィックにとって最も小さいフォーマットは何ですか？

WebPまたはAVIFのどちらもアルファチャンネルをサポートし、PNGよりもはるかに小さく圧縮できます。最新ブラウザのロゴやアイコンの場合、WebPまたはAVIFを使用することで、透明度を保ちつつ、PNGと比較してファイルサイズが劇的に削減されます。古いブラウザに対応させるために、<picture>要素を通じてPNGフォールバックを用意してください。

画像クレジット

フォーマットのサイズ比較と棒グラフ — eコマース風の写真（Pexels #16675632、Mikael Blomkvist撮影）から作成されたもので、PNG、JPEG、WebP、AVIFにおける実際の測定ファイルサイズを示しています。