Image Formats Explained: JPG vs PNG vs WebP vs SVG — pic0.ai

私が画像フォーマットについて考える方法を変えた$47,000のミス

ウェブパフォーマンスコンサルタントとしてのキャリアの3年目、私はクライアントのeコマースサイトがブラックフライデーセール中に見事にクラッシュするのを目撃しました。その原因は？最適化されていない商品画像がサーバーをダウンさせ、6時間で推定$47,000の収益を失わせたことです。その日以来、私の画像最適化へのアプローチは根本的に変わり、今日はこのガイドを書いている理由でもあります。

私はマーカス・チェンで、過去12年間、スクリプトなスタートアップからフォーチュン500の小売業者まで、さまざまな企業のウェブパフォーマンスを最適化してきました。その間に、2,000以上のウェブサイトを分析し、合計画像ペイロードを約340テラバイト削減しました。私が学んだことは一つ、それは画像フォーマットを選ぶことは単なる技術的な判断ではなく、あなたの利益に直接影響を及ぼすビジネス判断だということです。

私がこの分野で始めた時以来、画像フォーマットの状況は劇的に進化しました。2012年には、実質的に2つの選択肢がありました: JPGまたはPNG。今日では、WebP、AVIF、SVG、さらにはJPEG XLのような新興オプションを含む複雑なフォーマットのエコシステムをナビゲートしています。それぞれのフォーマットには強み、弱み、理想的な使用ケースがあります。これらの違いを理解することは、1.2秒で読み込まれるサイトと8秒で読み込まれるサイトの違いを生む可能性があります。そして、ウェブパフォーマンスにおいて、その6.8秒は永遠のようなものかもしれません。

この包括的なガイドでは、理解する必要がある4つの最も重要な画像フォーマットを分解します: JPG、PNG、WebP、SVGです。実世界のパフォーマンスデータ、実用的な実装アドバイス、私がクライアントと使用する意思決定フレームワークを共有します。あなたが開発者、デザイナー、マーケター、またはビジネスオーナーであっても、この記事の終わりまでには、あらゆる状況でどのフォーマットを使用すべきかを正確に知ることができるでしょう。

JPG: 今なおウェブを支配する作業馬

ウェブ上のすべての画像の約42%を占めるフォーマットから始めましょう: JPG（またはJPEG、どちらも同じフォーマットを指します）。1992年にJoint Photographic Experts Groupによって開発されたJPGは、30年以上にわたって驚くほど関連性を維持してきました。しかし、なぜでしょうか？

"ウェブパフォーマンスにおいて、6秒の遅延は単なる面倒だけでなく、コンバージョンを殺します。研究によれば、モバイルユーザーの53%が3秒以上かかるサイトを離れるとされています。そして、画像最適化はその失われた秒数を取り戻す最速の方法です。"

JPGはロスィ圧縮を使用しており、つまり画像データの一部を永久的に破棄することでファイルサイズを小さくします。JPGの天才的なところは、人間の目が気づきにくい情報を破棄するところです。私たちの目は、色の変化よりも明るさの変化に対して敏感であり、これを利用して色情報を輝度データよりも積極的に圧縮します。

私のテストでは、4000x3000ピクセルの典型的な高解像度写真は非圧縮ファイルで18-25 MBになることがあります。その同じ画像をJPGで品質レベル85で保存すると（0-100のスケール）、約2.1-2.8 MBになり、約88-90%の減少となります。品質を75に下げると、ウェブ表示のためにほとんど認識できない品質損失で1.2-1.6 MBに削減できる場合があります。

ここから面白くなります: 品質設定とファイルサイズの関係は線形ではありません。私の経験では、ほとんどのウェブ画像のスイートスポットは品質75-85の間です。品質85から95に上げても、視覚的品質が3-5%しか向上せず、ファイルサイズは40-60%増加することがあります。逆に、75から60に下げると、ファイルサイズはさらに30-40%減少する可能性がありますが、特に細かいディテールやテキストのある部分では品質の劣化がより顕著になります。

JPGは、写真や多くの色とグラデーションを含む複雑な画像に優れています。私は最近、1,200のデスティネーション写真を持つ旅行サイトを最適化しました。元のPNGファイルをJPGに変換して品質80で保存することで、合計画像ペイロードを340 MBから87 MBに、74%削減しましたが、ユーザーからの画像品質についての苦情はありませんでした。

しかし、JPGには重大な制限があります。透明性をサポートしていないため、ロゴやアイコン、さまざまな背景に座る必要のある画像には即座に適用できません。また、シャープなエッジ、テキスト、そしてソリッドカラーのグラフィックスに苦しみます。あるクライアントがロゴにJPGを使おうとしたのを見たことがありますが、テキストの周りの圧縮アーティファクトは、まるで17回コピーされたかのように見えました。

もう一つの重要な点: JPGの圧縮は破壊的かつ累積的です。JPGを開いて編集して再保存するたびに、別のラウンドのロスィ圧縮が適用されます。私は、何度も編集・再保存された画像が使い物にならないまで劣化するのを見たことがあります。私のルール: 常に非圧縮のマスターファイルを保持し、JPGにエクスポートするのは最終ステップとしてのみ行います。

PNG: 品質と透明性が最も重要なとき

PNG（Portable Network Graphics）は1996年にGIFの特許フリーの代替品として開発され、ロスレス圧縮や透明性が必要なときの定番フォーマットとなりました。JPGとは異なり、PNGは画像データを破棄しません—入れたものは出てくるものと正確に一致します。

PNGには2つの主なバリエーションがあります: PNG-8とPNG-24。PNG-8は最大256色をサポートし、シンプルなグラフィックス、アイコン、限られたカラーパレットの画像に最適です。PNG-24は何百万もの色をサポートし、ほとんどの人が「PNG」と言うときに指しているものです。また、PNG-32もあり、これは基本的に透明性のための8ビットアルファチャネルを持つPNG-24です。

PNGの透明性サポートは本当に印象的です。GIFのバイナリ透明性（ピクセルが完全に透明または完全に不透明である）とは異なり、PNGは256段階の透明性をサポートします。これにより、滑らかなアンチエイリアス処理や半透明効果が可能になります。私は最近、クライアントのロゴをさまざまな色の背景に重ねる必要があるデザインエージェンシーと仕事をしました。PNGのアルファ透明性により、すべての背景でロゴが完璧に見え、白いハローやギザギザのエッジはありませんでした。

しかし、PNGのロスレス圧縮には代償が伴います: ファイルサイズです。先ほど述べた4000x3000の写真は？PNG-24としては12-18 MBになることがあり、比較のためのJPGの6-10倍ほどになります。写真や複雑な画像にとって、このサイズのペナルティはウェブ使用にはほとんど正当化されません。

PNGが真に優れているのは、グラフィックス、ロゴ、スクリーンショット、テキストを含む画像です。私はコードエディターのスクリーンショットで比較テストを実施しました。品質85のJPGではファイルは340 KBでしたが、テキストは少しぼやけており、シャープなエッジの周りには明らかな圧縮アーティファクトが見られました。PNGとしては890 KBでしたが、テキストは完全に鮮明で読みやすかったです。技術文書や明瞭さが最も重要な状況では、その550 KBの違いは絶対に価値があります。

PNGは、均一な色面積が大きい画像においても優れています。圧縮アルゴリズムは、繰り返されるパターンやソリッドカラーに特に効率的です。シンプルなロゴが3つのソリッドカラーを持っている場合、PNGでは15-20 KBですが、JPGでは45-60 KBになる可能性があり、JPGが「小さい」フォーマットとされているにもかかわらずです。

私が頻繁に使用する最適化技術の一つはPNG量子化—カラー パレットを削減して小さなPNG-8ファイルを作成することです。pngquantのようなツールを使用すると、PNG-24からPNG-8にインテリジェントな色選択で削減でき、ほとんど認識できない品質損失で60-80%のファイルサイズ削減を達成することがよくあります。私はモバイルアプリのアイコンセットにこの技術を使用し、合計サイズを2.3 MBから580 KBに削減し、ユーザーにとっては視覚的品質がほとんど区別できないままでした。

WebP: デフォルトにすべき最新フォーマット

この記事全体からあなたに一つだけアドバイスができるとすれば、それはこれです: WebPをほぼすべての場面で使用し始めること。