PNGとJPGの根本的な違いは圧縮方式にあります。JPGは 非可逆 （ロッシー）圧縮を使い、データの一部を捨てることでファイルを小さくします。一方PNGは 可逆 （ロスレス）圧縮を使い、すべてのピクセルを元のまま保ちます。この違いが、画質もファイルサイズも透過の可否も、そして向いている用途も決めています。
項目別に比較
| 項目 | PNG | JPG |
|---|---|---|
| 圧縮の種類 | 可逆（ロスレス） | 非可逆（ロッシー） |
| 透過（アルファチャンネル） | ✅ 対応 | ❌ 非対応 |
| 写真に向く | ❌ 不向き（ファイルが重い） | ✅ 得意（非常に効率的） |
| ロゴ・アイコンに向く | ✅ 得意（輪郭がくっきり） | ❌ 不向き（ノイズが見える） |
| 文字入りのスクリーンショットに向く | ✅ 得意 | ❌ 不向き（文字がにじむ） |
| ファイルサイズ（写真） | JPGの3〜10倍 | 基準（1×） |
| 保存し直しても劣化しない | ✅ 得意 | ❌ 保存のたびに劣化 |
| 互換性 | ほぼすべての環境 | ほぼすべての環境 |
| アニメーション対応 | ❌ 標準では非対応 | ❌ 非対応 |
それぞれの圧縮の仕組み
JPGは画像を8×8ピクセルのブロックに分割し、離散コサイン変換（DCT）を使って、人の目が気づきにくい高周波成分を削ります。なめらかなグラデーションと自然な色の変化でできた写真では、この切り捨てはほとんど分かりません。ところが輪郭がくっきりした部分や、文字・ロゴ・アイコンのようなベタ塗りの領域では、8×8のブロックが目に見える汚れを生みます。これを JPEGノイズ（アーティファクト）と呼びます。
PNGはDEFLATEという可逆圧縮のアルゴリズムを使い、何も捨てずにピクセルデータを効率よく並べ替えます。ピクセルは一つ残らず正確に保たれます。写真ではこのやり方は分が悪く、見た目の得がないままファイルだけが膨らみます。逆に輪郭のはっきりした画像やベタ塗りの多い画像では、ノイズが出ないことが決定的な差になります。
⚠️ JPGの再圧縮には注意： JPGを開いて保存し直すたびに、すでに圧縮されたデータへさらに圧縮がかかります。5〜10回も繰り返せば劣化がはっきり見えてきます。作業は必ず元ファイルから行い、JPGへの書き出しは最後の一手だけにしてください。
PNGを使う場面
- 背景を透明にしたいロゴ、アイコン、ブランドマーク
- 文字が入ったスクリーンショットや画面キャプチャ
- 輪郭のはっきりしたインフォグラフィックやイラスト
- 何度も編集して保存し直す画像
- ベタ塗りの多いデジタルアート
JPGを使う場面
- ウェブ、ブログ、ECサイトに載せる写真
- 商品画像、バナー、サイトのメインビジュアル
- 透過が必要ない写真すべて
- メールマーケティング（互換性が最優先）
- 写真プリント
WebPはどうなのか
WebPは、この2つの両方と競合する新しい形式です。写真ならJPGより25〜35%、図版ならPNGより20〜30%小さくなり、しかも透過にも対応します。2026年のウェブ用途に限れば、JPGやPNGを使いたくなる場面のほぼすべてで、WebPがもっとも効率的な選択です。詳しい比較は PNG vs WebP と JPG vs WebP をご覧ください。