🗜️
← ガイド一覧に戻る

Web画像フォーマット完全ガイド — PNG、JPEG、WebP、AVIF

· タグ: image-formats, png, jpeg, webp, avif, web-development, compression

Web画像フォーマット完全ガイド

適切な画像フォーマットを選ぶことは、Webサイトのパフォーマンスに関して行える最もシンプルでありながら最も影響力のある決定の1つです。各フォーマットは、ファイルサイズ、視覚品質、機能サポート、ブラウザ互換性のバランスが異なります。このガイドでは、主要な4つのWeb画像フォーマットを詳しく解説し、公開するすべての画像について十分な情報に基づいた選択ができるようにします。

JPEG: ユニバーサルな主力フォーマット

JPEG（Joint Photographic Experts Groupの略）は、30年以上にわたりWebの支配的な画像フォーマットであり続けています。人間の目が知覚しにくい色情報を破棄することで小さなファイルサイズを実現する非可逆圧縮を使用します。

強み:

  • これまでに作られたあらゆるデバイスとブラウザでユニバーサルにサポートされています。
  • 滑らかな色のグラデーションを持つ写真コンテンツに優れた圧縮を提供します。
  • 0から100まで調整可能な品質で、ファイルサイズを細かく制御できます。
  • 事実上すべてのデバイスでハードウェアデコードアクセラレーションを利用できます。

弱点:

  • 透過サポートがありません。JPEGは透明な背景の画像をレンダリングできません。
  • 低品質設定では非可逆圧縮により目に見えるアーティファクトが発生します。特にエッジ周辺のブロックノイズとグラデーションのバンディングが顕著です。
  • シャープなテキスト、単色、硬いエッジのある画像ではパフォーマンスが劣ります。

最適なユースケース: 写真、多くの色を含む複雑なイラスト、商品画像、ヒーローバナー、そしてユニバーサルな互換性が不可欠なあらゆる画像。

PNG: 正確さと透過

PNG（Portable Network Graphics）は、GIFに代わる自由でオープンな代替手段として作られました。可逆圧縮を使用するため、すべてのピクセルが元の画像と完全に同じように再現されます。

強み:

  • 可逆圧縮により、何度保存しても品質劣化がゼロであることが保証されます。
  • 完全なアルファ透過サポートにより、滑らかなエッジと透けた背景を実現します。
  • スクリーンショットやフラットなグラフィックなど、広い領域が均一な色の画像に対して優れた圧縮を提供します。
  • 24ビットカラー（1670万色）と、より小さいファイルサイズのための8ビットインデックスカラー（256色）をサポートします。

弱点:

  • 写真コンテンツではJPEGよりもファイルサイズが大幅に大きくなります — 多くの場合2〜5倍です。
  • ネイティブのアニメーションサポートがありません。アニメーションコンテンツにはGIFまたはWebPを使用してください。
  • カメラやスマートフォンの写真をPNGで保存すると、かなりの帯域幅を浪費します。

最適なユースケース: ロゴ、アイコン、スクリーンショット、UIモックアップ、テキストを含む画像、透過が必要なグラフィック、そしてピクセル単位の完全な再現が譲れないあらゆるシナリオ。

WebP: モダンな万能フォーマット

WebPはGoogleによって開発されたモダンな画像フォーマットです。主要なユースケースをすべてより効率的に処理できる単一のフォーマットでJPEG、PNG、GIFを置き換えるように設計されています。

強み:

  • 単一フォーマットで非可逆圧縮と可逆圧縮の両方をサポートします。
  • 非可逆WebPは、同等の視覚品質で通常JPEGより25〜35パーセント小さくなります。
  • 可逆WebPはPNGより20〜25パーセント小さくなります。
  • 非可逆・可逆の両モードでアルファ透過をサポートします。
  • アニメーションをサポートしており、はるかに小さなファイルサイズでGIFの直接の代替となります。
  • 幅広いブラウザサポート: Chrome、Firefox、Edge、Safari 14以降。

弱点:

  • Internet ExplorerやSafari 13以前を含む古いブラウザはWebPをサポートしていません。
  • エンコード速度はJPEGより遅いですが、デコード速度は同等です。
  • すべての画像編集ツールがWebPをネイティブにサポートしているわけではありません。

最適なユースケース: ファイルサイズが優先されるWeb画像、モダンなWebアプリケーション、サポートするブラウザ向けにJPEGとPNGを単一フォーマットで置き換えるケース。

AVIF: 次世代フォーマット

AVIF（AV1 Image File Format）は最新の参入者で、AV1ビデオコーデックを基盤としています。広くサポートされている画像フォーマットの中で最も優れた圧縮効率を提供します。

強み:

  • 同じ視覚品質でJPEGより最大50パーセント小さくなります。
  • WebPより最大30パーセント小さくなります。
  • 非可逆圧縮と可逆圧縮の両方をサポートします。
  • 完全な透過と、広色域によるHDRサポートを備えています。
  • ロイヤリティフリーのオープンスタンダードです。

弱点:

  • ブラウザサポートはまだ拡大途上です。ChromeとFirefoxはAVIFをサポートしています。Safariはバージョン16でサポートを追加しました。
  • エンコードは計算コストが高く、JPEGやWebPよりも圧縮に時間がかかります。
  • 画像編集ツールやデザインツールでのサポートが限られています。
  • 専用ハードウェアがない場合、リアルタイムや高ボリュームのエンコードシナリオには適していません。

最適なユースケース: モダンブラウザを対象とした最先端のWebプロジェクト、最大限の圧縮が必要なシナリオ、HDRコンテンツ、そしてエンコード時間が許容される大規模な画像配信。

横並びフォーマット比較

| 機能 | JPEG | PNG | WebP | AVIF | |---------|------|-----|------|------| | 圧縮タイプ | 非可逆 | 可逆 | 非可逆と可逆 | 非可逆と可逆 | | 透過 | 不可 | 可（アルファ） | 可（アルファ） | 可（アルファ） | | アニメーション | 不可 | 不可 | 可 | 可 | | HDRサポート | 不可 | 不可 | 不可 | 可 | | 24ビットカラー | 可 | 可 | 可 | 可 | | 相対ファイルサイズ | 基準 | JPEGの200-500% | JPEGの65-80% | JPEGの50-70% | | ブラウザサポート | ユニバーサル | ユニバーサル | ユーザーの95%以上 | ユーザーの85%以上 | | エンコード速度 | 高速 | 中程度 | 中程度 | 低速 |

フォーマットの選び方

公開するすべての画像に対して、次の判断ツリーに従ってください：

  • 透過が不要な写真ですか？ 最大限の圧縮にはJPEGまたはAVIFを使用します。
  • 透過が必要、またはテキストとシャープなエッジが含まれますか？ ユニバーサルサポートにはPNG、モダンブラウザにはWebPを使用します。
  • アニメーションが必要ですか？ 大幅に小さいファイルのためにGIFの代わりにWebPを使用します。
  • 絶対的な最大圧縮が目標ですか？ オーディエンスがモダンブラウザを使用している場合はAVIFを使用します。

元のフォーマットのまま画像を圧縮する

ユースケースに適したフォーマットを選択したら、別のフォーマットに変換せずにファイルサイズを最適化します。無料のオンライン画像圧縮ツールはPNG、JPEG、WebP、AVIFをサポートしています — 画像をアップロードして、元のフォーマットを維持した圧縮版をダウンロードできます。品質を損なう変換チェーンも、不要なステップもありません。