PNG と JPG は Web で最もよく使われる 2 つの画像フォーマットです。選び方を間違えると、ファイルが無駄に大きくなるか、画像がぼやけてブロック状に崩れてしまいます。とはいえ、それぞれの得意分野を知れば選択は簡単です。
これは自分たちで計測しました。 同じ 4 枚のテスト画像を PNG → JPG のページに通した結果です。写真は 1.88 MB から 288.4 KB へ、85% の削減。ところが UI スクリーンショットは逆方向で、18.0 KB が 43.5 KB、142% の増加でした。PNG がただで保持していた鋭い境界を、JPG がビットを使ってぼかす必要があるからです。透明なロゴは白い背景が付いて戻ってきました。 計測データ全体を見る
結論から
PNG と JPG の一番大きな違いは、「どう圧縮するか」と「何を保存できるか」にあります。
- PNG は*可逆(ロスレス)*圧縮で、透過に対応します。ロゴ、アイコン、スクリーンショットなど、輪郭がはっきりした画像や文字入りの画像に向いています。
- JPG(JPEG)は非可逆(ロッシー)圧縮で、ファイルがずっと軽くなりますが、透過には非対応です。写真に向いています。
透過や鮮明な文字が必要なら PNG、写真で軽いファイルにしたいなら JPG を選びましょう。
PNG と JPG の比較表
| PNG | JPG(JPEG) | |
|---|---|---|
| 圧縮方式 | 可逆・全ピクセルを保持 | 非可逆・細部を破棄 |
| 透過 | 対応(アルファチャンネル) | 非対応 |
| ファイルサイズ | 大きめ(特に写真) | ずっと軽い |
| 再保存後の画質 | 劣化しない | 保存のたびに少し低下 |
| 向いている用途 | ロゴ・アイコン・文字・線画・スクショ | 写真・写実的な画像 |
| 色数 | 最大 1600 万色 + 8bit の透過 | 1600 万色・透過なし |
PNG:可逆で透過できる
PNG は可逆(ロスレス)圧縮で、すべてのピクセルをそのまま保存します。何度書き出しても画質は劣化しません。さらにアルファチャンネルによる透過に対応するため、ロゴをどんな背景に置いても白い四角で囲まれることがありません。次の用途に最適です。
- ロゴ、アイコン、輪郭のはっきりしたイラスト
- スクリーンショット(特に文字を含むもの)
- 線画、図表、ベタ塗りのグラフィック
- 背景を透明にしたい画像
- 何度も編集・再保存する素材
代わりにファイルは大きくなり、同じ写真を PNG で保存すると JPG の数倍になることもあります。可逆圧縮では、写真に含まれる細かなノイズやグラデーションを捨てられないからです。
透明は「選び間違えると戻れない」ところで、しかも数字は思うより小さいです。テストの透明ロゴは PNG で 28.8 KB。同じファイルを PNG → JPG のページに通すと 16.3 KB(-43%)になります。安くはなりますが、透明だった場所が白い箱になります。ここで手放しているのは画質ではなく、機能です。
JPG:軽量で写真向き
JPG は**非可逆(ロッシー)**圧縮で、目立たない細部を捨ててファイルを大幅に小さくします。同じ写真なら PNG の 5〜10 分の 1 になることも珍しくありません。透過には非対応ですが、次の場面で力を発揮します。
- 写真や、なめらかなグラデーションのある写実的な画像
- すぐにメール送信・アップロード・投稿したい画像
- 画質の完全さよりファイルサイズが重要な場面
難点は、保存のたびに少しずつ画質が落ちることです。同じ JPG を繰り返し編集・再保存すると、だんだん劣化していきます。輪郭・文字・ベタ塗りの周りにブロック状の「圧縮ノイズ」が出ることもあり、これが JPG をロゴやスクショに使うべきでない理由です。
「JPG のほうが小さい」は、ある一種類のよくある入力で崩れます。スクリーンショットです。私たちのものは 18.0 KB → 43.5 KB(+142%)。PNG がほぼ無料で保持していた 1 ピクセルの鋭い罫線を、JPG はビットを使ってぼかす必要があるからです。つまり規則は「JPG は小さい」ではなく「写真なら JPG は小さい」です。
本当に重要な違い
- 圧縮(非可逆 vs 可逆): JPG は画質を少し犠牲にして大幅に軽くし、PNG は完璧な画質を保つ代わりにサイズが大きくなります。
- 透過: 対応しているのは PNG だけ。JPG は必ず背景を単色で塗りつぶします。
- ファイルサイズ: 写真ならほぼ JPG の勝ち。色数の少ない平面的なグラフィックなら PNG のほうが軽く鮮明なこともあります。
- 繰り返し編集したときの画質: PNG は何度開いて編集・再保存しても劣化しません。JPG は保存ごとに取り返しのつかない劣化が積み重なります。
- 細部と色: どちらも数百万色を扱えますが、JPG は細かい文字や鋭い線をぼかし、PNG は鮮明に保ちます。
そして逆方向は対称ではありません。多くの比較記事が省く部分です。写真を JPG から PNG にすると実測で 330.2 KB → 2.07 MB(+542%)、JPG のスクリーンショットは 45.2 KB → 72.8 KB(+61%)。どちらも何も取り戻しません。JPEG はすでにディテールを捨てており、PNG は残ったものを(圧縮痕跡ごと)定価で保存するだけです。
私たちの計測から 2 行取れば、この比較の両側が同時に片付きます:
| テスト画像 | 入力 | 出力 | 変化 |
|---|---|---|---|
| 透過付きロゴ | 28.8 KB | 16.3 KB | -43% |
| スクリーンショット | 18.0 KB | 43.5 KB | +142% |
ロゴは 28.8 KB → 16.3 KB(-43%)。確かに節約ですが、アルファチャンネルは失われ、戻りません。その「節約」で得たのは、色付き背景でもう使えない画像です。スクリーンショットは逆方向でした。18.0 KB → 43.5 KB(+142%)、JPG のほうが大きいのです。PNG がほぼ無料で符号化する 1 ピクセルの硬い縁の記述に、JPEG はビットを費やすからです。本当の規則はこうです。JPG は「小さいほう」ではなく、「写真で勝ち、平坦なものすべてで負けるほう」です。
PNG と JPG の使い分け
- 透過が必要? → PNG。
- 透過不要の写真? → JPG。
- ロゴ・アイコン・スクショ・線画? → PNG。
- ファイルが大きすぎて送れない? → JPG。
- 編集し続けるマスター用? → PNG(最後に JPG で書き出す)。
よくある質問
画質が良いのはどっち? 同じ内容なら PNG が理論上は完璧、JPG は「十分きれい」です。ただし実際の写真では違いはほとんど見分けられず、しかも JPG はずっと軽くなります。
ファイルが軽いのはどっち? 写真は JPG。色数の少ない単純なグラフィックは PNG のほうが軽いことが多いです。
透過に対応しているのは? PNG です。透過 PNG を JPG に変換すると、透明部分は単色(通常は白)で塗りつぶされます。
JPG を PNG に戻せば画質は回復する? しません。JPG 圧縮で失われた画質は戻らず、PNG にしても劣化した画像を大きな可逆ファイルで包み直すだけです。
WebP などの他フォーマットは?
WebP は最新のフォーマットで、透過と写真レベルの圧縮を兼ね備え、通常 JPG や PNG より 25〜35% 軽くなります。新しいブラウザを使う読者向けにサイトを高速化するのに最適です。詳しくはWebP とは何か・いつ使うかをご覧ください。サイト用のフォーマットをゼロから選ぶなら、Web に最適な画像フォーマットで PNG・JPG・WebP・AVIF を並べて比較しています。
変換方法(プライバシーも安心)
インストールは不要です。以下の無料ツールはすべてブラウザ内で動作し、画像はアップロードされません。
- PNG を JPG に変換——PNG 写真を小さくして共有。
- JPG を PNG に変換——可逆のコピーやきれいな編集が必要なときに。
- PNG を WebP に変換——より小さい最新の Web 画像。
- 画像を圧縮——形式はそのままにファイルだけ小さく。
用途に合った形式を選び、数クリックで変換すれば、必要な画質のまま最小のファイルが手に入ります。