WebP・PNG・JPG：どのフォーマットを使うべき？

手短な答え

写真には JPG、透過やピクセル単位の鮮明さが必要なときは PNG、ウェブ向けに最も小さいファイルが欲しく、対象が現代的なブラウザを使うときは WebP を使いましょう。このガイドではその理由を説明するので、シンプルなルールが当てはまらないときも自信を持って判断できます。

各フォーマットの圧縮の仕組み

JPG は自然な画像向けに調整された非可逆圧縮を使います。目が気づきにくい細部を捨てることで、なめらかなグラデーションを持つ小さなファイルを実現しますが、透過はありません。PNG は可逆 —— すべてのピクセルを正確に再現し、透過のためのアルファチャンネルに対応するため、ロゴ、スクリーンショット、硬いエッジのグラフィックに最適ですが、写真ではファイルが大きくなる代償があります。WebP は両方をこなす新顔です。非可逆モードは同程度の品質でたいてい JPG より 25〜35% 小さく、透過付きの可逆モードはたいてい PNG を上回ります。

透過とエッジ

画像のどこかが透けて見える必要があるなら、JPG は対象外です。アルファチャンネルがなく、透過部分を白で埋めてしまいます。PNG と WebP はどちらも透過に対応します。くっきりした文字、UI 要素、均一色のイラストでは、PNG と可逆 WebP がエッジをカミソリのように鋭く保ちますが、JPG は高コントラストの線の周りにかすかなにじみ（圧縮アーティファクト）を生じさせます。

ブラウザとアプリの対応

JPG と PNG は普遍的です。ここ 20 年のあらゆるブラウザ、OS、アプリが開けます。WebP は現行の主要ブラウザすべてに対応していますが、それでも古いソフトウェア、一部のメールクライアント、それを認識しないレガシーシステムに出くわすことがあります。最後の数キロバイトより互換性のほうが重要なとき、JPG や PNG のフォールバックを残しておくべき主な理由はこれです。

実用的な意思決定フロー

• 現代的な対象向けのウェブ用写真？ WebP（非可逆）。
• どこでも開ける必要がある写真？ JPG。
• ロゴ、アイコン、スクリーンショット、または透過のあるもの全般？ PNG、またはサイズが重要で対応に問題がなければ可逆 WebP。
• 印刷や保存用のマスター？ 可逆の複製（PNG または元ファイル）を残しましょう。

どう決めても、プライベートなブラウザ内コンバーターで 3 つのフォーマット間を数秒で行き来できます。そして、フォーマットを変えずにファイルを小さくしたいだけなら、専用の圧縮ツールのほうが適しています。