JPEG・PNG・WebPの違いと使い分け

2026年8月31日 文責：ウホウホ

JPEG・PNG・WebPは何が違うのか、なぜ写真はJPEG・図はPNGが良いのかを仕組みから解説します。透過の扱い、圧縮による劣化、WebPへ移行すべき場面と避けるべき場面まで。

3つの形式は「何を捨てるか」が違う

JPEG・PNG・WebP はどれも画像を保存する形式ですが、優劣があるわけではありません。 それぞれ何を捨てて容量を減らすかの考え方が違うだけです。 ここを理解すると、用途ごとの選び方が自然と決まります。

JPEG：人間に見えない情報を捨てる

JPEG は1992年に策定された古い形式ですが、いまも写真の標準です。 人間の目は明るさの変化には敏感でも、色のわずかな差には鈍いという性質を利用し、 気づかれにくい情報を積極的に捨てて容量を減らします。

捨てた情報は二度と戻りません。これを非可逆圧縮と呼びます。 保存するたびに劣化が蓄積するため、JPEG を開いて保存し直す作業を何度も繰り返すと、 輪郭のまわりにモヤモヤとしたノイズが出てきます。 編集途中のファイルを JPEG で保管するのは避けるべき、と言われるのはこのためです。

PNG：1ピクセルも変えずに圧縮する

PNG は情報を一切捨てません。「同じ色が10個続く」といった規則性を見つけて、 短くまとめる方式です。展開すれば完全に元通りになるため、可逆圧縮と呼ばれます。

規則性を利用する仕組みなので、同じ色の面積が広い画像ほど小さくなります。 ロゴ、図表、スクリーンショットが得意な理由がこれです。 逆に写真のように隣り合うピクセルの色がすべて違う画像では規則性が見つからず、 ほとんど圧縮できません。写真を PNG で保存すると JPEG の5倍以上になることも珍しくありません。

もうひとつの特徴が透過（アルファチャンネル）です。 背景を透明にできるのは PNG と WebP だけで、JPEG にはこの概念自体がありません。

WebP：両方の良いところを持つ新しい形式

WebP は Google が2010年に公開した形式で、非可逆と可逆の両方のモードを持ちます。 写真なら JPEG のように情報を捨てて小さくでき、図なら PNG のように劣化なしで保存でき、 しかもどちらのモードでも透過を扱えます。

同じ見た目なら JPEG より20〜30%、PNG より最大で60%以上小さくなります。 Chrome・Edge・Firefox・Safari のすべてが対応済みで、Windows 10 以降・macOS 11 以降なら 標準のビューアでも開けます。

比較表

用途別の選び方

ウェブサイトに載せる → WebP

表示速度は検索順位の評価にも使われます。同じ見た目で容量が減るなら、選ばない理由がありません。 サイトに載せる画像を WebP に統一するだけで、スマートフォンでの体感速度が変わります。

メールに添付する・書類として提出する → JPEG

相手の環境が分からない場面では互換性を優先します。 JPEG は30年以上使われている形式で、開けない環境はまず存在しません。 役所や取引先への提出物では、新しさより確実さを取るべきです。

スクリーンショット・資料の図版 → PNG

文字や細い線が含まれる画像を JPEG にすると、輪郭のまわりに独特のにじみが出ます。 これは前述の「気づかれにくい情報を捨てる」仕組みが、 くっきりした境界線と相性が悪いために起きます。 説明用のスクリーンショットは PNG か WebP を選んでください。

ロゴ・アイコン → PNG または WebP

背景を透明にする必要があるため、この2択になります。 印刷にも使う予定があるなら PNG のほうが無難です。

よくある失敗

圧縮率はどこまで下げてよいか

JPEG と WebP の画質設定は、80%前後が実用上の分岐点です。 80%から下げていくと容量の減り方が鈍る一方で、劣化は急に目立ち始めます。 逆に90%以上に上げても、容量が増えるほどには見た目が良くなりません。

ウェブサイト用なら75〜85%、印刷を伴うなら90%以上、というのが実務的な目安です。 実際にどう見えるかは画像の内容によって変わるので、 画像圧縮ツールでスライダーを動かしながら、 自分の目で確かめるのが確実です。

まとめ

• 迷ったら：ウェブなら WebP、それ以外なら JPEG
• 透明が必要：PNG か WebP（JPEG は不可）
• 文字が含まれる：PNG か WebP（JPEG はにじむ）
• 相手の環境が不明：JPEG（互換性が最優先）