JPEG対PNG対WebP — 画像フォーマットの選び方と変換のタイミング

数年前、小さなビジネスサイトのパフォーマンス監査をしていたときのことです。ホームページには11枚の画像があり、すべてPNG形式で、すべて商品の写真でした。最大のものは4.2MB。ヒーロー画像だけで2.8MBありました。

誰も意図的に間違ったことをしたわけではありません。デザインツールがデフォルトでPNGを出力し、画像が綺麗に見えるので誰も疑問を持たなかっただけです。確かに綺麗に見えました。でも同時に、80%の品質でJPEGに変換すれば視覚的には区別がつかないのに、画像の合計データ量を約18MBから約2.5MBに削減できたのです。

この種の問題はWeb上のいたるところにあります。各フォーマットが実際に何をするかを理解すれば、完全に解決できます。

JPEG：写真のための万能フォーマット

JPEGは1992年から存在し、インターネット上で最も広く使われている画像フォーマットです。長く使われてきた理由は、意図した目的——写真の圧縮——に非常に適しているからです。

写真は連続した色調変化を持ちます——色と光の滑らかなグラデーションが互いに溶け込んでいます。JPEG圧縮はこれを利用して、人間の視覚系が比較的敏感でない高周波の細部を破棄します。結果として、圧縮されていない画像の10分の1のサイズのファイルが、ほとんど視覚的な劣化なしに生成されます。

JPEGが向いている場面：

• 商品写真、編集写真、ヒーロー画像
• 滑らかなグラデーションと自然な色変化を持つ画像
• ソーシャルメディアへのアップロード、メール添付、ファイルサイズが重要な場面

JPEGが向かない場面：

• シャープなエッジとテキストを含む画像（ロゴ、スクリーンショット、図）——高コントラストのエッジに圧縮リングアーティファクトが発生
• 透過が必要な画像——JPEGはアルファチャンネルをサポートしていない
• 繰り返し編集される画像——保存のたびに品質が低下する

**80%ルール：**70〜75%以下だと多くの写真でJPEGアーティファクトが見え始めます。85〜90%以上になるとファイルサイズが大幅に増加しますが、視覚的な改善はほとんどありません。75〜85%の範囲が、品質の犠牲なしに圧縮の恩恵をほぼすべて得られる範囲です。

PNG：ピクセルが正確でなければならない場合

PNGはGIFのパテントフリーの代替として1990年代半ばに作られました。可逆圧縮を使用し、PNGのすべてのピクセルはそのままの状態で正確に保存されます。

PNGが適しているケース：

• インターフェース、コード、テキストのスクリーンショット
• フラットな色とシャープなエッジを持つロゴやアイコン
• 透過が必要な画像（完全なアルファチャンネルをサポート）
• さらに編集するための画像——世代間の損失がないため品質を維持できる
• ピクセルアートと図

PNGが間違った選択となるケース：

• 写真。写真のPNGはほぼ常に、視覚的な品質の違いなしに同等のJPEGの3〜5倍大きくなります。最初に述べたのがまさにこの間違いです。

WebP：今すぐデフォルトにすべきフォーマット

WebPはGoogleが開発し2010年にリリースされました。Safariは2020年になってようやくサポートを追加し、2021年以降はすべての主要ブラウザがWebPをサポートしています。「ブラウザサポート」の懸念は実質的に解消されました。

WebPがサポートするもの：

• 損失圧縮（JPEGに似ているが、同等の品質で通常25〜35%小さい）
• 可逆圧縮（PNGに似ているが、通常26%小さい）
• 透過（ロッシーとロスレスの両モードでアルファチャンネル）
• アニメーション（ただし複雑なため、すべてのエディターでサポートされているわけではない）

実際には、WebPはほとんどの写真コンテンツでJPEGに対して厳密な改良版です。同じ画像、小さいファイル、同等の品質。透過が必要なPNGが必要だった画像に対しても、WebPははるかに小さいファイルサイズで透過を提供します。

注意点：一部の古いCMSプラットフォーム、メールクライアント、デザインツールはWebPのサポートが限定的です。ニュースレター用の画像を出力する場合は、メールプラットフォームがWebPに対応しているか確認してください。

変換シナリオ

PNGからJPEGへ：最も一般的で影響の大きい変換です。商品やヒーロー写真がPNGとして保存されている場合、80%品質でJPEGに変換すると通常60〜80%のファイルサイズ削減が視覚的な品質損失なしに達成できます。唯一失うものは透過で、PNGがアルファチャンネルを使用している場合はJPEGに変換する前に背景色を塗りつぶす必要があります。

PNGからWebPへ：両方の良いところを兼ね備えています。透過サポート（PNGと同様）とより小さいファイルサイズ（JPEGより優れている）の両方が得られます。

JPEGからWebPへ：確実な定番最適化です。現代のブラウザを使用している訪問者には既存のJPEG写真アーカイブをWebPとして提供し直すことで、25〜35%の帯域幅を節約できます。多くのフレームワークとCDNが今はこれを自動的に行っています。

WebPからJPEGまたはPNGへ：WebPを受け付けないプラットフォームやツールに画像を提出する際に必要かもしれません。高品質設定でのWebPからJPEGまたはPNGへの変換は視覚的に損失なしです。

ToolboxHubsの画像フォーマットコンバーターの使い方

画像フォーマットコンバーターはCanvas APIを使用してブラウザ内で実行されます：

1. 画像をアップロード — ドラッグ&ドロップまたはクリックして選択します。JPEG、PNG、WebP、GIFの入力をすべて受け付けます。
2. 出力フォーマットを選択 — フォーマットドロップダウンからJPEG、PNG、またはWebPを選択します。
3. 品質を設定 — JPEGとWebPのロッシー出力に対しては品質スライダー（デフォルト80%）があります。PNGのロスレス出力には品質設定はありません。
4. 変換してダウンロード — 変換をクリックして結果をダウンロードします。

品質設定を変更すると、ダウンロード前にトレードオフを確認できるようにプレビューが更新されます。

知っておくべき制限：

アニメーションGIFをアップロードできますが、静止画（最初のフレーム）として変換されます。アニメーションWebPの出力はサポートされていません。SVGは入力としてサポートされていません。

品質設定の意味

品質の割合は直接的に何かを測っているわけではなく——エンコーダーがどれほど積極的に情報を破棄するかを制御する圧縮パラメーターです：

• 90〜100%：ほぼ損失なし。ファイルサイズは大きい。再編集、印刷、またはアーティファクトが許容できないコンテキストで使用する画像に有用。
• 75〜85%：標準的なWebのスイートスポット。ほとんどのWebコンテンツに適切な範囲。
• 60〜75%：目に見えて小さいファイル。高コントラスト領域や詳細な検査でアーティファクトが見える可能性がある。サムネイルや高速読み込みが品質よりも重要な小さいUI画像に許容範囲。
• 60%未満：目に見えるブロック状のノイズとぼかし。

パフォーマンスへの影響

具体的なスケール感を伝えると：最適化されていないPNGが多数ある典型的な写真重視のランディングページは15〜25MBの画像データを持つ可能性があります。80%品質でWebPに変換すると、それが2〜4MBになる可能性があります。10Mbpsの平均モバイル帯域幅では、画像の読み込み時間が12〜20秒から1.6〜3.2秒に変わります。

GoogleのCore Web Vitals——特にLargest Contentful Paint（LCP）——は画像サイズに大きく影響されます。LCP要素が画像の場合（通常そうです）、その画像のフォーマットと圧縮はパフォーマンススコアに最も直接的な影響を持つ要素のひとつです。

関連ツール

画像圧縮ツール — フォーマットを変えずにファイルサイズを削減したい場合に。

画像リサイザー — ブラウザで400pxに縮小表示するために3000px幅の画像を提供していませんか？提供前にリサイズすることはフォーマット選択と同様に重要です。

まとめ

フォーマット選択のシンプルなガイドライン：Web上の写真にはJPEGかWebP。透過が必要な画像にはWebP（または古い環境ではPNG）。ロゴ、スクリーンショット、テキストを含む画像にはPNG。品質スライダーは80%から始めて問題があれば調整します。

画像フォーマットコンバーターは変換を処理します。どのフォーマットを選ぶかの判断はこの記事が担当しました。