WebP・PNG・JPG：画像にはどの形式？

各形式の圧縮方法

JPG：非可逆、写真に最適化

JPGは画像を8×8のブロックに分け、それぞれを周波数成分へ変換し、人の目が気づきにくい高周波の細部を捨てます。画質スライダーは捨てる強さを調整します。細部が細かく不規則で、小さな誤差がノイズに隠れる写真には、非常に効果的です。

くっきりした端があるものには不向きです。白地の黒線は純粋な高周波情報で、形式がまさに捨てるものなので、文字や輪郭の周囲に特徴的なリンギングの縁が出ます。JPGにはアルファチャンネルもまったくありません。弱いのではなく存在しません。透明画像をJPGで保存すると、透明度は通常黒か白の単色に永久に置き換わります。

PNG：可逆、フラットな画像に最適化

PNGはピクセルデータを捨てません。隣から各ピクセルを予測し、小さな差分を保存し、DEFLATEを適用します。同じか近いピクセルの長い並びはほぼゼロへ圧縮できるため、単色の図、UIのスクリーンショット、線画、ピクセルアートはよく小さくなります。

この形式には区別すべき2つのモードがあります。 Truecolor PNG 完全な24ビット色と任意のアルファを保存します。 パレットPNG （PNG-8）は最大256色のテーブルへのインデックスを格納するため、各ピクセルは4バイトではなく1バイトで済みます。実際に少数の色しか使っていないフラットな画像では、パレットモードはサイズを大幅に小さくでき、完全に可逆です。多くの人はこの方法を使いませんが、PNGがWebPに明確に勝る場合があるのはこのためです。

WebP：1つの形式で両方に対応

WebPには、同じ拡張子を使う2つの別のモードがあります。 非可逆WebP 動画符号化由来のブロック予測を使い、通常は同等の知覚品質でJPGより20〜30%小さいファイルになります。 可逆WebP PNGより高度な予測を使う別方式で、通常はtruecolor PNGより20〜30%小さくなります。

重要なのは、どちらのモードもアルファに対応することです。これがWebPの真の利点です。WebP以前は、透明画像はPNGである必要があり、つまり可逆で、大きなサイズになっていました。アルファ付きの非可逆WebPなら、切り抜いた写真を通常の写真と同じように圧縮できます。

ひと目でわかる比較

画像の内容に基づいて選ぶ

写真、透明度なし

画質80の非可逆WebPが、妥当な最小サイズの選択で、画質80のJPGが互換性のある代替です。どちらも適切ですが、WebPは通常約4分の1小さくなります。コンテンツネゴシエーションによる <picture> 要素でWebPを配信しJPGを代替にすると両方を得られます。ただし2026年では代替はほぼ念のための対策です。

フラットな画像、ロゴ、ピクセルアート、UIのスクリーンショット

PNGで、パレットモードを試してください。「何でもWebP」が最も失敗する場面です。12色のロゴをパレットPNGにすると数キロバイトですが、画質80の非可逆WebPは大きくなることがよくあります。パレットが追加コストなしで表すものを、ブロック単位の細部としてビットを使って説明し、完全な単色領域に劣化も加えるためです。可逆WebPは競争力があり、勝つ場合もありますが、差は小さいので両方を書き出して比べる価値があります。

スプライトなど、アルファが必要なもの

PNGです。すべてのゲームエンジン、エディター、素材の処理が確実に読み、可逆なので繰り返し編集の劣化が積み上がりません。スプライトは小さく、サイズはめったに制約になりません。エンジンが対応するなら可逆WebPは妥当な配布形式ですが、どちらでも作業用にPNGを保持してください。JPGは使わないでください。アルファがないため、丁寧な切り抜きに白い枠が付きます。

透明度のある写真

ここは非可逆WebPが得意とし、他の形式の実際の能力不足を埋める領域です。透明背景の商品切り抜き写真はPNGなら800KBでも、品質80のアルファ付き非可逆WebPなら、見た目の違いなく100KB未満になることがあります。代替が必要ならPNGだけで、数倍大きくなります。

知っておきたい2つの例

具体的な数値を見れば、トレードオフを理解しやすくなります。実際の最適化から2つの例を紹介します。

• 606KBのPNGソーシャルカードを81KBのJPGに再エンコードしたもの。 そのカードは写真の背景に文字を重ねたもので、大半のデザインツールの初期設定であるPNGで書き出されていました。PNGは写真に向かず、ファイルが巨大になりました。JPG品質82なら、実際に閲覧される寸法で見た目の違いはありません。ドロップダウンを1つ変えるだけで87%削減できます。
• ページ背景をPNGからWebPへ変換すると、約57%小さくなりました。 これらは大きく柔らかい、グラデーションの多い画像でした。硬い縁も透明部分もない滑らかな内容は、非可逆圧縮が最も得意とするものです。同じ見た目で、バイト数は半分未満になります。

どちらの成功も、一律のルールではなく、内容に形式を合わせた結果です。単色のアイコンセットで同じテストをすれば、どちらの場合もPNGが勝ったはずです。

ソーシャル画像の例外

WebPを意図的に使わない場所があります。Open GraphとTwitterカードの画像です。URLを取得するのは、対応率の統計が示す最新ブラウザーでなく、Slack、Discord、iMessage、WhatsApp、LinkedIn、RSSリーダー、アプリ内ブラウザー、多数の社内ツールなどのクローラーやリンクプレビューボットです。

その集団では対応状況が明らかに悪く、失敗の仕方にも問題があります。見えるエラーではなく、リンクが画像なしで表示され、誰かに指摘される数週間後まで気づかないのです。代わりにJPGを使うコストは、従量課金の接続を使うユーザーではなく、インフラが取得する1ファイルで、おそらく30%ほどバイト数が増える程度です。

メールでも同様の注意が必要です。メールクライアントには独自の互換性事情があり、今もWebPに対応していないものがいくつかあります。メール用の添付ファイルや画像はJPGかPNGにしてください。

判断の手順

1. 透明度は必要ですか？ 不要なら手順3へ進んでください。必要ならJPGは完全に除外します。
2. 透明な画像は写真ですか？ アルファ付き写真 → 非可逆WebP。アルファ付きフラット画像やスプライト → PNG。
3. 写真ですか？ はい → 非可逆WebP、互換性が重要ならJPG。いいえ → 続ける。
4. 単色とくっきりした端ですか？ パレットPNGと可逆WebPを書き出して2つのファイルを比較し、小さいほうを配信してください。決めつけないでください。
5. ソーシャルカード、メール画像、または未知の処理向けの素材ですか？ 上のすべてに優先して、JPGまたはPNGを使ってください。

手順4はよく飛ばされます。2ファイルを書き出してバイト数を比較するのは15秒ほどで、どんな経験則より確実です。答えは本当に画像ごとに異なるからです。

当サイトの スプライトシートスライサー PNG、JPG、WebPに書き出し、非可逆形式には品質調整があるため、ページを離れず一度の分割で2形式を試せます。スプライトは引き続きPNGが安全な標準です。中間フレームより、完成したウェブ素材で形式の影響が大きくなります。

よくある質問