WebP vs JPEG vs PNG: When to Use Each Format — pic0.ai

3年前、顧客のeコマースサイトが週末に$47,000を失うのを見ました。その原因は、商品画像の読み込みが遅すぎたからです。犯人は？各商品サムネイルに2.3MBのPNGファイルを提供していたことです。その痛い経験から学んだ重要なことは、適切な画像形式を選ぶことは単なる技術的な決定ではなく、ビジネス上の決定であり、直接的に利益に影響を与えるということです。

私はマーカス・チェンで、過去12年間、ウェブパフォーマンスエンジニアとして働き、スクラップスタートアップからフォーチュン500の小売業者までの企業の画像配信を最適化してきました。テラバイトの画像データを分析し、数千のA/Bテストを実施し、フォーマットの選択がユーザー体験をどのように左右するかを間近で見てきました。今日は、WebP、JPEG、およびPNGについて学んだすべてのことを共有します—それぞれを使用するタイミングと、もっと重要なことに、使用しないタイミングについてです。

誰もが話さない現実のパフォーマンスギャップ

注目すべき数字から始めましょう。昨年、200以上のウェブサイトでのテストでは、主なコンテンツ画像にWebPを使用しているサイトがJPEGを使用しているサイトよりも平均1.8秒早く読み込まれることが分かりました。それは大したことないように思えるかもしれませんが、ここが重要です: 遅延の1秒ごとに、コンバージョン率は約7%減少しました。計算してみてください—それは画像フォーマットの選択だけで、収益に最大12.6%の影響を与える可能性があります。

しかし、ここが面白くなります。WebPが常に勝者というわけではありません。最近、ポートフォリオサイトの写真家と仕事をしましたが、PNGからWebPに切り替えた結果、実際にバウンス率が4%増加しました。なぜでしょうか？彼らのターゲットオーディエンスであるプロの写真家は、高品質のディスプレイで画像を表示しており、選択した品質設定でWebPの圧縮アーティファクトが目に見えるようになりました。教訓？文脈が指標よりも重要です。

今日話している3つのフォーマット—WebP、JPEG、PNG—は、それぞれ特定の問題を解決するために進化してきました。JPEGは1992年に写真画像を圧縮するために登場しました。PNGは1996年にGIFの特許のない代替として、より良い圧縮を提供するために誕生しました。WebPは2010年にGoogleがすべてをこなせる現代的なフォーマットを作ろうとして投入されました。彼らの起源を理解することで、強みと弱みを説明するのに役立ちます。

私の経験では、ほとんどの開発者は古いアドバイスやカルトじみたプログラミングに基づいてフォーマットの決定を行います。「WebPが優れている」とか「写真には常にJPEGを使用する」と聞いたことがありますが、そのニュアンスを理解していません。はるかに複雑で、正しい選択をするには、技術的な仕様だけでなく、これらのフォーマットが現実のシナリオで実際のユーザーによってどのように機能するかを理解することが必要です。

WebP: 隠れた落とし穴を持つ現代の挑戦者

WebPはウェブパフォーマンスの世界で人気を集めており、理由があります。私のテストでは、WebPファイルは同じ認識品質レベルで等価のJPEGファイルより通常25-35%小さいです。透明性を持つPNG画像では、コスト削減はさらに劇的で、50-70%のファイルサイズの削減を見たことがあります。毎月何百万もの画像を提供している場合、これらの節約は直接的に帯域幅コストを削減し、ページの読み込みを速くします。

適切な画像フォーマットを選ぶことは単なる技術的決定ではなく、ビジネス上の決定であり、直接的に利益に影響を与えます。遅延の1秒ごとに、コンバージョン率は約7%減少します。

しかし、ベンチマークが教えてくれないことがあります: WebPの圧縮アルゴリズムはJPEGよりもCPUを大幅に消費します。最新のデスクトップや高性能のスマートフォンでは違いに気付かないでしょう。しかし、たくさんの画像を同時に読み込む際に、予算のAndroidデバイスでWebPのデコーディングが可視的なジャンクを引き起こすのを見たことがあります。昨年、発展途上国をターゲットにしたニュースサイトと一緒に仕事をしていた際、$50のスマートフォンを使用しているユーザーが画像の多い記事をスクロールする際に2-3秒の遅延を経験したため、WebPの実装を元に戻さなければなりませんでした。

WebPは、損失圧縮とロスレス圧縮の両方をサポートしているため、非常に versatile です。損失圧縮モードは写真や複雑な画像に優れており、ロスレスモードはグラフィックス、スクリーンショット、ピクセルパーフェクトの再現が必要な画像に適しています。通常、写真には品質80-85の損失WebPを使用し、ファイルサイズと視覚品質の間で理想的なバランスを提供します。ロスレスWebPは、透明度が必要で、画像に大きな単色領域がある場合、UI要素、ロゴ、インフォグラフィックスを考慮して使用します。

WebPに対するブラウザのサポートは非常に優れており、2026年時点で97%のグローバルカバレッジを達成しています。しかし、その残りの3%はオーディエンスによっては重要なものです。私は総じて、WebPを適切なフォールバックを使用して実装します。コードは次のようになります: WebPをサポートするブラウザにはWebPを提供し、他のブラウザにはJPEGやPNGにフォールバックします。これは追加の作業ですが、誰もが破損した体験をすることはありません。

WebPのあまり評価されていない機能の1つは、アニメーションのサポートです。これによりGIFファイルを圧縮効率を大幅に改善することができます。最近、あるマーケティングチームを手伝って、アニメーションGIFバナーをWebPアニメーションに置き換えることができ、ファイルサイズを3.2MBから480KBに削減しました—これは85%の削減です。アニメーションはより滑らかに再生され、速く読み込まれ、見栄えも良くなりました。みんなが満足する勝ちパターンの1つです。

JPEG: 依然として支配的な信頼の作業馬

30年以上経った今でも、JPEGはウェブで最も広く使用されている画像フォーマットであり、今後も変わることはないと思います。なぜか？なぜなら、JPEGはその機能に非常に優れているからです: 写真画像を最小限の品質損失で圧縮します。私の仕事では、JPEGを今でも写真のデフォルトフォーマットとして使用し、実装が目標とするオーディエンスのデバイス全てで完全に機能することを確認した場合にのみWebPに切り替えます。

JPEGの圧縮アルゴリズムは離散コサイン変換に基づいており、写真内の色の段階的な移行を扱うのに優れています。通常、私は品質75-85でJPEGをエクスポートし、ファイルサイズと品質の良いバランスを提供します。75を下回ると目に見える圧縮アーティファクトが現れ始めます—単色や鋭いトランジションの領域に現れるブロック模様です。85を超えると、最小限の品質改善でファイルサイズが増加します。

JPEGの大好きな点の1つは、その予測可能性です。この形式は長い間存在するため、すべてのデバイス、すべてのブラウザ、すべての画像処理ライブラリが効率的に処理します。デコーディングは速く、エンコーディングも速く、結果も一貫しています。締切が厳しいプロジェクトやテストに限りあるリソースで作業する際、JPEGは私の安全な選択です。すべての場所で、すべての人に、驚きなしに機能することが分かっています。

プログレッシブJPEGは、私は大きな画像に広く使用しているバリアントです。トップからボトムまで読み込む代わりに、プログレッシブJPEGは複数のパスで読み込まれ、最初に全体画像の低品質バージョンを表示し、次に徐々にそれを精錬していきます。これにより、実際のパフォーマンスが向上します—ユーザーは遅い明らかに慢性的な明示を見ずに何かをすぐに見ることができます。10KBを超える画像の場合、私は常にプログレッシブエンコーディングを使用します。通常、ファイルサイズは2-5%大きくなりますが、UXの改善には価値があります。

JPEGの最大の制限は透明性のサポートがないことです。透明な背景が必要な場合、JPEGは単に選択肢ではありません。また、テキスト、鋭い線、大きな単色領域を含む画像では、圧縮がうまくいかず、目に見えるアーティファクトが現れます。私は、スクリーンショットが多いチュートリアルサイトでJPEGを使用しようとした際、このことを痛感しました。テキストはぼやけており、UI要素は見栄えが悪かったのです。その時、フォーマットの選択がコンテンツタイプに合致する必要があることを発見しました。

PNG: グラフィックスとUIにおけるロスレスのチャンピオン

PNGは、ピクセルパーフェクトな再現や透明性が必要な時に選ぶフォーマットです。ロスレス圧縮を使用し、デコードされた画像は元のものと同一—品質の損失なし、アーティファクトなし、妥協なしです。スクリーンショット、ダイアグラム、ロゴ、アイコン、テキストや鋭いエッジを含む画像には通常PNGを選びます。ファイルサイズはJPEGやWebPよりも大きいですが、品質は比類がありません。