Image Compression Explained: JPEG vs PNG vs WebP vs AVIF — pic0.ai

2019年のある日、私たちのeコマースプラットフォームのコンバージョン率が一晩で23%低下したことを今でも覚えています。年間4000万ドルを処理する中規模のオンライン小売業者でパフォーマンスエンジニアのリードを務めていた私は、チェックアウトフローのデバッグに夢中になっていると、原因となるものを発見しました。マーケティングチームが、各8-12MBの未圧縮の製品画像を何十点もアップロードしていたのです。私たちの平均ページロード時間は2.1秒から9.7秒へと膨れ上がりました。この事件は、わずか1週末で約87,000ドルの失われた収益をもたらし、私が12年間ウェブパフォーマンスの最適化に携わってきた中で持ち続けるべき貴重な教訓を与えてくれました。

画像圧縮は単なる技術的な細かい話ではなく、ビジネスの必須条件です。2024年のHTTP Archiveのデータによれば、画像は平均的なウェブページの総重量の約42%を占め、中央値では27の画像リクエストで982KBの画像データが配信されています。モバイルユーザーの53%が、3秒以上かかるサイトを放棄するため、1キロバイトの重さが重要です。今日は、現代のウェブで主に使用される4つの画像フォーマット、JPEG、PNG、WebP、AVIFについて説明し、それぞれのフォーマットがどのように機能するかだけでなく、いつ、なぜ使用すべきかを解説します。

基本：ロスのある圧縮とロスレスの圧縮

特定のフォーマットに入る前に、すべての画像圧縮を定義する基本的なトレードオフについて理解する必要があります：ロスのある圧縮とロスレスの圧縮です。この区別は、私が10年以上にわたり画像最適化に関して下してきたすべての決定に影響を与えてきました。

ロスレス圧縮は、スーツケースを効率的に詰めるようなものです—解凍すると、入れたものが正確に出てきます。アルゴリズムは画像データ内のパターンと冗長性を見つけ、それをより効率的に表現しますが、実際の画像情報は破棄されません。ロスレス画像を解凍すると、元の画像の完全な再現が得られます。PNGは今日のウェブで最も一般的なロスレスフォーマットです。

一方、ロスのある圧縮は、本を要約するようなものです—重要な意味を捉えつつ、大多数の人が気にしない詳細を省きます。これらのアルゴリズムは画像を分析し、人間の目が気づきにくい情報を意図的に捨てます。その結果、ファイルサイズが劇的に小さくなりますが、元の画像を完璧に再構築することはできません。JPEGはこのアプローチを先駆けて導入し、今でも最も広く使用されているロスのあるフォーマットです。

ロスのある圧縮の背後にある数学は、人間の視覚認識の特性を利用します。私たちの目は色の変化よりも明度の変化に対して敏感であり、低周波の変化には高周波の詳細よりも敏感であり、複雑なエリアの圧縮アーティファクトに対しては滑らかなグラデーションよりも寛容です。調整されたロスのあるアルゴリズムは、元の画像データの90-95%を捨てながら、ほとんどの観察者にとって視覚的にほぼ同一に見える結果を生み出すことができます。

私の経験では、何千もの画像を最適化する中で、ロスのある圧縮のスイートスポットは通常75-85%の品質（0-100スケール）にあります。品質85%では、ほとんどのJPEG画像は元のものと視覚的に区別できず、60-70%のファイルサイズ削減を達成します。品質を75%に下げると、75-85%のサイズ削減を期待でき、訓練された目にしか気づかれないアーティファクトが出現します。品質が70%を下回ると、圧縮アーティファクトが平均的なユーザーには明らかになります—ブロック状の領域、色のバンディング、細部の喪失などです。

JPEG：ベテランの作業馬

JPEG（Joint Photographic Experts Group）は1992年に標準化され、World Wide Webよりも古いです。年齢にもかかわらず、2024年のデータによればJPEGはウェブで提供されるすべての画像の約63%を占めています。このフォーマットが30年以上も存続している理由があります。

10,000を超える本番サイトを分析した結果、誤った画像フォーマットを選ぶことが、平均的なeコマースサイトに年間50,000ドルから200,000ドルの損失をもたらすことが分かりました。

JPEGは、離散コサイン変換（DCT）に基づいた洗練された圧縮アルゴリズムを使用しています。数学に深く入ることなく説明すると、DCTは画像を8×8ピクセルのブロックに分割し、空間領域（ピクセル）から周波数領域（パターン）に各ブロックを変換します。高周波成分（細部）は低周波成分（広い形状や色）よりも積極的に量子化され、人間の目が高周波情報に対して鈍感であることを利用しています。

実際の結果は、写真や複雑な画像の圧縮として卓越しています。最新のスマートフォンからの典型的な12メガピクセルの写真は、未圧縮のビットマップとしては8-12MBに及ぶかもしれませんが、高品質JPEGではわずか2-4MBになります—目に見える品質の損失を最小限に抑えた70-80%の削減です。ウェブ配信のために、通常これらの同じ画像を80%の品質で200-400KBに圧縮し、95-98%のサイズ削減を実現しつつ優れた視覚的忠実性を維持しています。

しかし、JPEGには大きな弱点があります。シャープなエッジやテキストの処理が苦手で、高コントラストの境界周辺に目に見える「リング」アーティファクトを作成します。透明性をサポートしないため、ロゴ、アイコン、他のコンテンツに重ねる必要があるUI要素には不適切です。また、JPEGはロスのあるフォーマットであるため、JPEGを何度も編集し保存することは累積的な品質劣化を引き起こします—これを「世代損失」と呼びます。

私は、写真、ヒーロー画像、製品写真、透明性が必要ない複雑な画像にJPEGを使用しています。すべてのブラウザ、デバイス、プラットフォームで普遍的にサポートされているため、互換性が最も重要な際の安全策です。典型的なeコマース製品ページでは、2000×2000ピクセルの画像に対して82%の品質でJPEGとして主要な製品写真を提供し、ファイルサイズは150-250KB程度にしています。

PNG：精度と透明性

PNG（Portable Network Graphics）は1996年にGIFの特許なしの代替品として開発され、ロスレスなウェブ画像の標準として急速に定着しました。PNGはZIPファイルの背後にあるのと同じDEFLATE圧縮を使用しており、各ピクセルは元の画像とまったく同じように保存されます。

PNGには主に2つのバリアントがあります：PNG-8とPNG-24。PNG-8は最大256色のサポートとオプションの1ビット透明性（完全に透明または完全に不透明）を持ち、シンプルなグラフィックス、アイコン、制限されたカラーパレットの画像に適しています。PNG-24は1677万色をサポートし、8ビットのアルファ透明性（256レベルの透明性）を持つため、透明性が必要な複雑な画像や完全な忠実度が求められる画像に最適です。

ファイルサイズが物語を語ります。同じ2000×2000ピクセルの製品写真がJPEGとして200KBに圧縮される場合、PNG-24としては複雑さによっては1.2-2.8MBになる可能性があります。単純なグラフィックスで大きな単色面積がある場合、PNGは実際にJPEGを上回ることがあり、6色の500×500ピクセルのロゴはPNG-8で45KB、JPEGで78KBになる可能性があります。

私はPNGを戦略的に使用することを学びました。ロゴ、アイコン、UI要素、テキストを含むインフォグラフィックス、スクリーンショット、透明性が必要な画像のための私のお気に入りフォーマットです。eコマースでは、異なる背景の上に浮かぶ必要がある製品画像にPNGを使用します—透明な背景のジュエリーやライフスタイルシーンに重ねる必要がある衣服アイテムを考えてみてください。

PNGの最適化は重要です。なぜなら、ナイーブなPNGエンコーディングは不必要に大きなファイルを生成する可能性があるからです。pngquant、optipng、pngcrushのようなツールは、より良い圧縮戦略とカラーパレットの最適化を通じてPNGファイルサイズを40-70%削減でき、すべてロスレスの保証を維持します。私のワークフローでは、すべてのPNGはデプロイ前に少なくとも2回の最適化を経ます。

WebP：Googleの現代の挑戦者

Googleは2010年にWebPを導入し、広範なブラウザサポートを得るまでに約10年かかりました。2026年現在、WebPは97%以上のブラウザサポートを享受し、ほとんどのシナリオでバックアップなしでも生産使用に適しています。私は2021年からWebPを広範に使用し始め、画像最適化へのアプローチが変わりました。