画像圧縮の仕組み：JPEG、PNG、WebP、AVIF の解説

実務的な結論

画像圧縮は「どの形式が毎回勝つか」を競うものではありません。どの情報を捨てられるか、どの情報は正確に保たなければならないか、どれだけ CPU 時間を使えるか、書き出し後にどこで動く必要があるか——これらのトレードオフの集合です。

出発点として、実務的にはこう考えてください。

• 最大限の互換性が要る写真、とくにメール、ダウンロード、古いアプリ、印刷ポータル、厳格なアップロードフォームでは JPEG を使う。
• スクリーンショット、UI キャプチャ、図、ロゴ、ピクセルを正確に残す必要のある透過グラフィックには PNG を使う。
• 幅広いブラウザ対応のまま JPEG や PNG より小さくしたい、最新のウェブ配信の日常的な既定として WebP を使う。
• 大きく、閲覧回数の多い写真的画像で、WebP または JPEG のフォールバックを配信でき、エンコードが多少遅くても許容できる場合は AVIF を使う。

単純そうに見えますが、細部が重要です。商品写真、パスポート写真、ソフトウェアのスクリーンショット、透過のウォーターマークはどれも「画像」ですが、圧縮のされ方はまったく同じではありません。

拡張子ではなく用途で選ぶ

コーデックに入る前に、その画像に何をさせたいかを決めましょう。

形式の助言が矛盾して見えることがあるのはこのためです。「AVIF のほうが小さいから AVIF を使え」は静的サイトのビルドでのヒーロー画像には良い助言でも、政府のフォーム、メールクライアント、古い CMS が受け取る顧客アップロード画像には悪い助言になり得ます。

圧縮の 2 つの系統

このガイドで扱う画像形式はすべて、可逆圧縮、不可逆圧縮、あるいはその両方を使います。

可逆圧縮は数学的な冗長性だけを取り除き、デコード時に同じピクセルを復元します。スクリーンショットに白い背景、繰り返しの UI 色、繰り返しの直線があれば、可逆形式はそれらのパターンをコンパクトに記述できます。PNG は代表的な可逆ウェブ形式で、WebP にも可逆モードがあります。

不可逆圧縮はファイルを小さくするために画像情報を恒久的に捨てます。コツは、最終的な表示サイズで見て人が気づきにくい情報を捨てることです。JPEG は不可逆です。WebP と AVIF は可逆にも不可逆にもできますが、ウェブ配信の多くは写真に不可逆モードを使います。

避けるべき誤りは、「不可逆＝悪」「可逆＝プロ向け」と決めつけることです。1600 px のブログ写真なら、丁寧に圧縮された不可逆 WebP はページ上でほぼ同じに見え、帯域を大きく節約できます。一方、小さなメニューテキストを含むソフトウェアのスクリーンショットは、ファイルサイズは良く見えても不可逆エクスポートではぼやけて見えることがあります。

4 つの形式のひとめ

パターンは「新しいほど常に勝つ」ではありません。新しい形式ほど分析を多く行い、データをより効率的に詰めますが、その分エンコード時間、QA 時間、フォールバックの複雑さがかかります。

同じ「品質値」が同じ品質を意味しない理由

品質 80 で保存した JPEG と品質 80 で保存した WebP は同じ目盛を使っていません。数値は各エンコーダー独自のモデルに渡され、内部で異なる判断に影響し、ツールごとに異なる形で対応付けられることもあります。

だから実務的な圧縮には 2 つのチェックが必要です。

1. 表示される実際のサイズで画像を確認する。 商品カードのサムネイルは、400 % ズームではなく商品カードのサムネイルとして判断すべきです。
2. 正しい寸法にしてからバイト数を比較する。 5000 px のカメラ原本を 1600 px のウェブ画像にリサイズするほうが、品質スライダーを下げすぎるより節約できることがふつうです。

フォルダを一括変換するなら、全部書き出す前に難しいケースをいくつか試しましょう。顔、空、暗い影、テキストの多いスクリーンショット、透過のエッジ、ノイズの多い室内写真などです。

JPEG：写真が小さくなり、文字が汚くなる理由

JPEG は写真の挙動に合わせて作られた古い定番の写真向け形式です。Library of Congress は、JPEG ファミリーがフルカラーおよびグレースケールの連続階調画像に広く使われ、古典的な処理では 8×8 のブロック変換を使うと記しています。要するに、JPEG は画像を小さなブロックに分け、各ブロックを周波数情報に変換し、閲覧者が気づきにくい詳細を量子化します。

以下ではうまく働きます。

• 顔、衣服、建物、風景、料理の写真
• 空、影、肌の色調のような自然な階調
• 透過ピクセルを必要としない画像
• ほぼどこでも開ける必要のあるファイル

以下ではうまく働きません。

• スクリーンショットの小さな文字
• 硬いエッジのあるアイコンやロゴ
• 平坦な色の図
• 繰り返し編集し、書き出すファイル
• 透過画像（JPEG にアルファチャンネルはありません）

分かりやすい JPEG のアーティファクトは、ブロック境界、文字まわりのリンギング、コントラストの高い細部のモスキートノイズ、なめらかなグラデーションのバンディングです。これらは偶然ではなく、ブロックベースの不可逆圧縮の目に見える副作用です。

強み

• ブラウザ、OS、アプリ、メールクライアント、フォーム、業者の間で非常に幅広く対応
• カメラ写真などの連続階調画像に効率的
• 一般的なワークフローでエンコード・デコードが速い
• プレビュー、添付、アップロード、共有がしやすい

弱み

• 透過非対応
• テキスト、エッジ、平坦な色のグラフィックまわりでアーティファクト
• 不可逆エクスポートを繰り返すと劣化が積み重なる
• ウェブ写真では、見た目が同等でも WebP や AVIF より大きくなりがち

JPEG を使う場面

最後の数キロバイトより互換性が大事なとき——パスポート写真のアップロード、書類ポータル、メール添付、取引先ポータル、印刷所、古い CMS、フォールバックの <img> ソースなど——には JPEG を使いましょう。写真が中心で透過が要らないファイルにも向きます。

PNG：スクリーンショットが鮮明になり、写真が巨大になる理由

PNG はポータブルで可逆のラスター画像として設計されました。W3C の PNG 仕様は静止 PNG とアニメ PNG を扱い、インデックスカラー、グレースケール、トゥルーカラー、任意のアルファ透過をサポートします。

日々のウェブ制作では要点はシンプルです。PNG はピクセルをそのまま残します。行を予測しやすく変換するフィルタをかけ、その結果を DEFLATE で圧縮します。繰り返しの色と明瞭な境界があれば、これは見事に働きます。

PNG に向くもの：

• 小さな文字を含むソフトウェアのスクリーンショット
• 画像として書き出した UI 図や比較表
• SVG が使えないときのロゴ
• 透明なオーバーレイ、スタンプ、ウォーターマーク
• あとで再編集する可能性のあるグラフィック

PNG に向かないもの：

• カメラ写真
• 大きなウェブヒーロー画像
• 自然な質感のある商品写真
• 正確なピクセルよりファイルサイズが大事なギャラリー画像

PNG の写真がしばしば巨大になるのは、PNG が仕事をしているからです。不可逆写真コーデックなら単純化してしまうノイズ、細かい質感、センサーの微妙なばらつき、色の微細な変化を保持します。

強み

• 可逆のピクセル再現
• アルファチャンネルによる透過
• 鮮明なテキストと硬いエッジ
• 平坦・反復的なグラフィックに強い圧縮
• 編集用マスターや透過ワークフローに信頼できる形式

弱み

• 写真では大きなファイル
• 通常の PNG ワークフローに不可逆モードがない
• WebP が受け入れられる場面では、透過ウェブグラフィックで WebP より重くなり得る

PNG を使う場面

正確なピクセルが重要なとき——スクリーンショット、UI ドキュメント、図、シンプルなグラフィック、対応が予測できる必要のある透過アセット——に PNG を使いましょう。可逆の作業コピーが意図的に必要な場合を除き、カメラ写真の既定に PNG を使わないこと。

WebP：実務的な最新ウェブの既定

WebP が便利なのは、複数の役目を 1 つの形式でこなせるからです。Google のドキュメントは、WebP が不可逆圧縮、可逆圧縮、透過、アニメーション、メタデータ、カラープロファイルに対応すると説明しています。これにより JPEG より柔軟で、ウェブ配信では PNG より小さくなることが多いです。

不可逆 WebP は、JPEG の古い DCT 中心の処理ではなく、VP8 系の予測符号化に基づいています。可逆 WebP は別の変換とエントロピー符号化を使います。実務的に重要なのは、WebP がサイトの画像ライブラリ——ブログ写真、商品グリッド、サムネイル、軽いイラスト、多くの透過アセット——の良い既定になり得るということです。

とはいえ WebP は万能ではなく、どこにでも送るのに最適とは限りません。ブラウザは WebP を扱えても、メールクライアント、アップロードフォーム、古いデザインアプリ、SNS、印刷ワークフローが拒否することがあります。だからこそ JPEG と PNG は配信・互換性のための形式として今も重要です。

強み

• 見た目が同等の写真で JPEG より小さいことが多い
• アルファ透過に対応
• 不可逆・可逆の両モードに対応
• 最新ブラウザで幅広く対応
• AVIF に比べてエンコードが速い

弱み

• 一部のメールクライアント、フォーム、古いアプリ、CMS プラグイン、印刷ワークフローで拒否される
• SVG ロゴや編集可能なデザインソースの本当の代替にはならない
• 大きな写真では AVIF より大きくなり得る

WebP を使う場面

ページを自分で制御できる場合、最新サイトの画像配信の大半には WebP を使いましょう。ブログ画像、商品カード写真、サムネイル、多くの透過ウェブアセットの堅実な既定です。画像が自サイトを離れて他者のシステムに入るときは、JPEG や PNG も用意しておきましょう。

AVIF：パイプラインが必要な高圧縮の選択肢

AVIF は AV1 で符号化された画像データを HEIF ベースの画像フォーマットに格納します。AVIF 仕様は SDR および HDR 画像、広色域のユースケース、アルファなどの補助画像、より高度な画像符号化機能をサポートします。web.dev も、AVIF の圧縮上のゲインは画像内容、エンコーダー設定、品質目標に依存すると述べています。

一般的なウェブチームにとって実務的な話はこうです。AVIF は大きな写真では優秀になり得ますが、気軽な共有形式というより、パイプライン向きの形式です。エンコードに時間がかかり、古いツールのプレビュー対応が遅れ、フォールバックの扱いがより重要になります。

AVIF に向くもの：

• 大きなヒーロー写真
• 写真の多いランディングページ
• 編集部風のギャラリー
• 一度のエンコードで多数配信するトラフィックの高い画像
• HDR、高ビット深度、広色域がワークフローの一部の画像

AVIF に向かないもの：

• 厳格なアップロードフォーム
• メール添付
• 古いツールで開かなければならないチームの画像
• 節約分がパイプラインの複雑さに見合わない小さなサムネイル
• 小さな文字のあるスクリーンショット（丁寧にテストしない限り）

強み

• 写真や複雑な画像で優れた圧縮になることが多い
• アルファ透過、HDR、広色域
• 最新の <picture> スタックの最初のソースとして有用
• ビルド時や CDN での画像生成に向く

弱み

• 大きなバッチではとくに、エンコードが遅い
• ツール対応が JPEG、PNG、WebP に比べて予測しづらい
• 安全な本番配信には WebP、JPEG、PNG のフォールバックが要る

AVIF を使う場面

より小さなバイト数が、パイプラインの追加作業に見合うだけの大きさと配信頻度がある画像に AVIF を使いましょう。トラフィックの多いホームページのヒーロー画像は良い候補です。90 px のアイコン、単発のメール添付、政府のアップロードフォームなどは通常向きません。

AVIF と WebP を比較・AVIF を JPG や PNG に変換する方法

スクリーンショットで PNG が JPEG に勝てる理由

よくある驚きです。PNG のスクリーンショットは、同じ内容の JPEG より小さくきれいになることがあります。

スクリーンショットは繰り返し構造で満ちていることが多いからです。白い文書背景、灰色のツールバー、直線的な黒文字、いくつかのアイコン色、繰り返しの UI 間隔は、可逆圧縮で簡潔に表現できます。JPEG はテキストを正確に保つべきだと知らず、写真のように単純化しようとし、結果として大して小さくならないうえに文字やエッジまわりで見栄えが悪くなることがあります。

スクリーンショットが主に写真なら WebP や JPEG が勝つことがあります。主に UI、テキスト、平坦な色なら PNG か可逆 WebP から始めましょう。

写真に不可逆圧縮が必要な理由

カメラ写真は違います。センサーノイズ、細かい質感、柔らかな影、不規則なグラデーション、ピクセル間の何百万もの微細な変化を含みます。可逆圧縮は活かせる反復が少ないので、ウェブ配信に十分なほどファイルを小さくできないことがよくあります。

不可逆写真形式が有効なのは、閲覧者がふつう気にするのは主題、構図、色、体感の鮮鋭さであって、元のピクセルすべてではないからです。丁寧に圧縮した JPEG、WebP、AVIF は、最終的な表示サイズでは見えづらい情報を取り除けます。

危険なのはやりすぎることです。低い品質設定は肌を平坦にし、布地をぼかし、葉のディテールを壊し、ブロック境界を作り、空や影にバンディングを生みます。それらの領域が重要な画像なら、品質を上げるか表示ファイルを大きくしましょう。

最新ウェブ配信ではフォールバックを使う

サイトを自分で制御するなら、形式は 1 つに絞る必要はありません。本番でよくあるパターンは、最も小さい最新形式を最初に配信し、その後ろに安全なフォールバックを置くことです。

<picture>
  <source srcset="/images/hero.avif" type="image/avif">
  <source srcset="/images/hero.webp" type="image/webp">
  <img
    src="/images/hero.jpg"
    alt="自然光で撮影した商品のクローズアップ写真"
    width="1200"
    height="800"
  >
</picture>

ブラウザは対応する最初のソースを使います。AVIF 対応のブラウザは AVIF ファイルを取得できます。AVIF を扱えないブラウザは WebP を試せます。より古い、あるいはより厳格なクライアントには JPEG のフォールバックがあります。

画像に透過や正確なテキストが必要なときは、フォールバックを JPEG ではなく PNG にしましょう。

実務的な圧縮ワークフロー

1 枚の画像なら：

1. 手元にある最高品質のソースから始める。
2. まず実際に表示する最大サイズにリサイズする。
3. 画像の用途に合わせて形式を選ぶ。
4. 品質設定を 1〜2 種類書き出す。
5. 実際のページやアップロード先で結果を比較する。
6. マスターファイルを残し、公開済みコピーを再圧縮しなくて済むようにする。

サイトのフォルダなら：

1. 全部を変換する前に代表的なセットを選ぶ。
2. 写真、スクリーンショット、透過グラフィック、サムネイル、難しい暗い画像を 1 枚含める。
3. 基本の最新形式として WebP をテストする。
4. バイト節約が意味のある場所でだけ AVIF をテストする。
5. 必要な場所には JPEG や PNG のフォールバックを残す。
6. ファイルサイズはリサイズ後に確認する（前ではない）。

PhotoTools は中間のステップを助けます。ソースがページに大きすぎるなら リサイズ を、ファイルサイズと品質を調整するなら 圧縮 を、特定の形式が必要な出力先ならフォーマットコンバーターを使ってください。変換と圧縮はブラウザ内で行われるので、ツールのワークフロー中に画像がサーバーへアップロードされることはありません。

形式間で変換する方法

PhotoTools はブラウザ内で JPG、PNG、WebP、AVIF、HEIC の間を直接変換します。画像をドロップし、出力形式を選び、結果をプレビューし、新しいファイルをダウンロードしてください。

出力先に応じてコンバーターを使い分けましょう。

• ほぼどのフォームやアプリでも動くファイルが必要？ JPEG に変換。
• 透過や正確なスクリーンショットのピクセルが必要？ PNG か可逆 WebP に変換。
• ウェブ画像を小さくしたく、サイトが受け入れる？ WebP に変換。
• 管理されたウェブパイプラインで最大の圧縮が必要？ フォールバック付きで AVIF を試す。

最後にひとつのルールで画像品質は大きく守れます。不可逆形式の間を何度も行き来しないこと。高品質の JPEG から始めた写真を配信用に WebP へ変換するのは問題ありません。その WebP を JPEG に戻し、編集し、また変換する——ここでアーティファクトが積み重なります。可能なら常にオリジナルに戻ってください。

PNG を JPG に変換・JPG を WebP に変換・AVIF を JPG に変換・どの形式を使うべき？（判断ガイド）