画像フォーマットガイド：PNG、JPG、WebP、SVG — 使い分け方

間違った画像フォーマットを選択すると、帯域幅の無駄、ページ読み込みの遅延、視覚品質の劣化を招きます。各フォーマットには固有の強みがあり、写真に最適なフォーマット、ロゴに最適なフォーマット、アイコンに最適なフォーマットはそれぞれ異なります。このガイドは、毎回正しい選択をするのに役立ちます。

クイック判断チャート

コンテンツタイプ	最適なフォーマット	代替
写真	WebP（非可逆）	JPEG
スクリーンショット	PNG	WebP（可逆）
ロゴ	SVG	PNG（透過付き）
アイコン	SVG	PNG（小サイズ）
イラスト	SVG	WebP
アニメーション	WebP（アニメーション）	GIF
印刷	TIFF/PNG	JPEG（品質95+）

フォーマット詳細解説

JPEG (JPG)

1992年以来、写真の標準フォーマットです。離散コサイン変換（DCT）に基づく非可逆圧縮を使用します。

最適な用途：写真、自然の風景、グラデーションのある複雑な画像。 避けるべき用途：テキスト、ロゴ、スクリーンショット、シャープなエッジのある画像。

品質のスイートスポット：

品質85：ほとんどの写真で視覚的にロスレス（最適なデフォルト）
品質75：Webサムネイルの良いバランス
品質95：印刷やアーカイブ用のほぼロスレス

ヒント：JPEGは透過をサポートしません。透過背景の写真が必要な場合は、WebPまたはPNGを使用してください。

PNG

可逆圧縮 — すべてのピクセルが正確に保持されます。完全なアルファ透過をサポートします。

最適な用途：スクリーンショット、UI要素、色付き背景上のロゴ、テキストを含む画像。 避けるべき用途：写真（ファイルサイズがJPEGの5-10倍になります）。

PNG-8 vs PNG-24：

PNG-8：256色、小さいファイル、シンプルなグラフィックに適する
PNG-24：1600万色、大きいファイル、写真やグラデーションに必要

WebP

Googleの最新フォーマットで、非可逆圧縮と可逆圧縮の両方、透過、アニメーションをサポートします。

最適な用途：Web上のすべて — 最も優れた汎用フォーマットです。 避けるべき用途：印刷（ソフトウェアサポートが限定的）、メール（一部のクライアントがWebPを表示できない）。

JPEGに対する利点：同等品質で25-35%小さく、透過をサポート。 PNGに対する利点：可逆画像で26%小さく、非可逆圧縮をサポート。 ブラウザサポート：グローバルで97%以上。

当サイトの画像オプティマイザーで画像の変換と最適化ができます。

SVG

XMLベースのベクターフォーマット。画像はピクセルではなく数学的な図形で定義されます。

最適な用途：ロゴ、アイコン、イラスト、図表、スケーリングが必要なあらゆるグラフィック。 避けるべき用途：写真、複雑なラスター画像。

ユニークな利点：

品質を損なうことなく無限にスケーラブル
シンプルなグラフィックの場合、非常に小さいファイルサイズ（多くの場合1KB未満）
CSSでスタイリング可能（色変更、アニメーション）
アクセシブル（SVG内のテキストは検索可能でスクリーンリーダー対応）
テキストエディターで編集可能

<!-- SVGアイコン: 200バイト vs PNG: 5,000バイト -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <circle cx="12" cy="12" r="10"/>
  <path d="M12 8v4l3 3"/>
</svg>

AVIF

AV1ビデオコーデックに基づく最新のフォーマット。WebPを上回る圧縮性能を持ちます。

最適な用途：ヒーロー画像、商品写真、最大限の圧縮が重要な高優先度の画像。 考慮事項：ブラウザサポート92%、エンコーディングが遅い、編集ツールのサポートが限定的。 節約効果：同等品質でJPEGより50%小さい。

GIF

最も古いWeb画像フォーマット（1987年）。256色に制限されています。

最適な用途：シンプルなアニメーション（ただしWebPアニメーションの方が優れています）。 避けるべき用途：ほぼすべて — WebPやAPNGの方が優れた代替手段です。 レガシーな用途：メッセージングアプリやソーシャルメディアのリアクション/ミームでは依然として広くサポートされています。

サイズ比較（同一画像）

1200×800の写真をWeb向けに最適化：

フォーマット	ファイルサイズ	品質	透過
PNG（可逆）	2,400 KB	完全	あり
JPEG（品質85）	180 KB	優秀	なし
WebP（品質80）	120 KB	優秀	あり
AVIF（品質70）	85 KB	優秀	あり

同一グラフィック（ロゴ、500×200）：

フォーマット	ファイルサイズ
SVG	3 KB
PNG-8	15 KB
PNG-24	45 KB
WebP（可逆）	12 KB

モダンなベストプラクティス：Picture要素

各ブラウザに最適なフォーマットを配信：

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="説明" loading="lazy">
</picture>

ブラウザは最初にサポートされたフォーマットを選択します。すべてのユーザーが最小サイズで最高品質を得られます。

最適化ワークフロー

最高品質のソースから開始 — 以前に圧縮した画像から最適化しないこと
適切なフォーマットを選択 — 上記の判断チャートを使用
表示サイズにリサイズ — 800pxのコンテナに4000pxの画像を配信しないこと
圧縮 — 当サイトの画像コンプレッサーで手軽に最適化
レスポンシブサイズを配信 — 異なるビューポート幅に srcset を使用
遅延読み込みを有効化 — フォールド下の画像に loading="lazy"

最適化についての詳細は、Web画像最適化ガイドをご覧ください。

FAQ

すべての画像をWebPに変換すべきですか？

Web配信では、はい — WebPは97%以上のブラウザサポートを持つ最高の汎用フォーマットです。アーカイブと編集用にはオリジナルファイルをネイティブフォーマット（JPEG、PNG）で保持し、配信用にWebPに変換してください。WebPをサポートしない少数のブラウザ向けに、<picture> 要素でJPEGフォールバックを提供してください。

AVIFは本番環境で使えますか？

AVIFは92%以上のブラウザサポートで本番環境対応です。主な考慮事項はエンコーディングの遅さ（WebPの3-10倍遅い）と編集ツールのサポートの限定です。ビルド時に画像をエンコードする静的Webサイトでは、エンコーディング速度は問題になりません。常にWebPまたはJPEGフォールバックを提供してください。