PNGとJPEGの違いは圧縮と透過、写真とスクショで選び分ける基準

PNGとJPEGの違いは、保存するときに画素（画像を構成する最小の要素）の情報を捨てるかどうかです。JPEGは情報の一部を捨てて容量を減らし、PNGは捨てずに画像をそのまま残します。写真にはJPEGが適しており、スクリーンショット・図・透過が必要な画像にはPNGが適しています。

資料に貼る画像もメールに添付する画像も、保存するときにPNGとJPEGのどちらにするかで容量と見た目が変わります。この記事では、写真2枚とスクリーンショット1枚を両方の形式で保存して容量を測った結果と、PNGとJPEGを互いに変換したときに画質・透過・容量がどう変わるかを解説します。

PNGとJPEGの違いは情報を捨てるかどうかにある

画像の容量を減らす圧縮には、元の画素を完全に戻せる可逆圧縮と、情報の一部を捨てて小さくする非可逆圧縮があります。このうちJPEGは非可逆圧縮の形式で、PNGは可逆圧縮の形式です。もう1つの大きな違いが透過で、PNGは画素ごとに不透明度（アルファチャネル）を持てるので背景を透明にでき、JPEGは持てないので透明にできません。

PNGは拡張子が.pngの形式で、W3C（Webの標準を定める団体）の仕様書は可逆の画像形式と定めています。JPEGは静止画の形式です。MDN（Web技術の解説サイト）によると、現在最も普及している形式とのこと。

拡張子は.jpgや.jpegです。2形式の違いを表にまとめると次のとおりです。 圧縮の行は容量に、透過の行は変換したときの結果に関わります。

JPEGは保存し直すほど色がずれるが、増え方は鈍る

JPEGは保存のたびに非可逆圧縮をかけ直すので、JPEGの画像を開いて同じ品質で保存し直すと、元の画像に対する色のずれが大きくなっていきます。写真1枚を品質90で10回保存し直して測ると、10回目のずれは1回目の約1.4倍でした。

ただし増加幅は回ごとに小さくなります。前の回から加わったずれは2回目で0.801、10回目で0.118でした。10回目に加わったずれは、2回目に加わったずれの約1/7です。

ここでのずれは元の画像との間で画素ごとに色の差を求めて平均した値で、計測には画像処理ライブラリのsharpを使いました。編集中の画像はPNGで持っておき、最後に1回だけJPEGへ書き出せば、ずれは1回分にとどまります。

PNG-8とPNG-24は色の持ち方を指す通称で仕様にはない

W3CのPNG仕様書（第3版）は、PNGの画像を色の持ち方で5つのタイプに分けていて、PNG-8やPNG-24という名前は本文に出てきません。PNG-8と呼ばれるのはパレット（使う色の一覧）の色を番号で指すインデックスカラーの画像で、パレットには1〜256色が含まれます。

MDNはインデックスカラーのPNGをインデックス圧縮オプション（PNG-8）と書き、256色より少ない画像ではさらに小さくなることがよくあるとしています。PNG-24は赤・緑・青を各8ビットで持つ画像の通称で、8ビットが3色分で合わせて24です。

JPGとJPEGは拡張子の書き方が異なるだけで同じ形式

.jpgと.jpegはどちらもJPEG形式の拡張子で、MDNではJPEGの拡張子として.jpg・.jpeg・.jpe・.jif・.jfifが掲載されています。つまり、拡張子を.jpgから.jpegに書き換えても、画像の中身は変わりません。

写真はJPEG、スクリーンショットや図はPNGを選ぶ

MDNは写真にJPEGかWebPが適しているとし、スクリーンショットには可逆圧縮の形式を勧めています。理由は、スクリーンショットの文字が非可逆圧縮でぼやけやすいことです。MDNは、図もSVGにできない場合はPNGなど可逆圧縮の形式を使う必要があるとしています。

実際に両方の形式で保存して容量を測りました。素材はmacOSに付属する512×512ピクセルの写真2枚と、sakuttoAIのツール画面を撮った2560×1600ピクセルのスクリーンショット1枚です。書き出しにはsharpを使っています。

計測した容量は次のとおりです。写真ではPNGが大きく、スクリーンショットでは品質90のJPEGよりPNGが小さくなりました。

写真をPNGにすると品質90のJPEGより容量が約6〜7倍

写真AはPNGが687.2KBで品質90のJPEGが100.0KBなので、PNGはJPEGの約6.9倍でした。写真Bでも約5.9倍になっています。ブログに掲載する写真のように透過などPNGにする理由がない写真は、品質90のJPEGにすれば容量をPNGの約1/7から1/6に減らせます。

品質を75に下げると、写真AのJPEGは58.9KBになります。元の画像に対する色のずれは、品質90で保存した場合の約1.5倍です。切り抜いた写真のように透過が必要な場合は、容量が大きくなってもPNGで保存します。

スクリーンショットは品質90のJPEGよりPNGが小さい

スクリーンショットは写真と逆で、品質90のJPEG（232.2KB）よりPNG（213.9KB）のほうが小さくなりました。ただし、JPEGを品質75まで下げると164.2KBになりましたが、文字の輪郭まわりに色のざらつきが出ました。下の図はスクリーンショットの同じ部分を4倍に拡大したもので、左がPNG、右が品質75のJPEGです。

Macのスクリーンショットも、macOS Tahoe 26以降の対応モデルでは「SDR（互換性優先）」を選ぶとPNGで保存されます。PNGより軽くしたい場合は可逆圧縮のWebPという選択肢もあり、MDNによると、圧縮率は可逆のWebPのほうが間違いなく高いとのこと。

PNGとJPEGの変換で画質は向上せず透過と容量が変わる

形式を変換しても、変換前の画像に無い情報は増えません。したがって、PNGからJPEGにすると透明な部分は残らず、JPEGをPNGにしてもJPEGで捨てた情報は戻りません。

sakuttoAIのPNG⇔JPG変換では、変換モードを「自動判定」「すべてJPGに変換」「すべてPNGに変換」の3つから選ぶことができます。JPGにするときの画質は、「低圧縮（高品質）」「標準（おすすめ）」「高圧縮（小さいサイズ）」の3段階です。

変換はブラウザの中で行われます。ただしログインが必要で、無料登録すれば1日3ファイルまで変換できます。

PNGからJPEGにすると透明部分は背景色で塗られる

JPEGは不透明度を持てないので、透明な部分はどれかの色で塗ってから保存します。PNG⇔JPG変換では、詳細設定の「背景色（透過部分）」で白・黒・薄いグレーから選べ、デフォルト値は白です。

白いページに表示する画像なら、白のままで困りません。透明なまま使いたい画像は、JPEGにせずPNGのまま保存します。

JPEGからPNGにしても画質は戻らず容量は約4.6倍

写真AをmacOS標準の画像変換コマンドsipsで品質90のJPEGにすると、149.9KBになりました。表より大きいのは、同じ品質90でも書き出しに使うソフトによって容量が変わるためです。このJPEGをPNGへ変換すると688.2KBになり、容量は約4.6倍でした。

PNGに保存されたのはJPEGで情報を捨てた後の画素なので、見た目は変換前のJPEGと変わりません。画質を戻したいときは、JPEGにする前の画像から書き出し直します。

写真はJPEG、透過と文字の多い画像はPNGという選び分け

PNGとJPEGの違いは、保存時に画素の情報を捨てるかどうかです。PNGは情報を捨てずに残して透過も持てますが、JPEGは情報を捨てて容量を減らし、透過は持てません。測った結果では写真のPNGは品質90で保存したJPEGの約6〜7倍になり、スクリーンショットでは品質90のJPEGよりPNGが小さく、品質75のJPEGは文字のまわりにざらつきが出ました。

透過が必要な画像と文字の多い画像はPNGで、写真はJPEGで保存します。また、JPEGをPNGに変換しても画質は戻らないので、編集中の画像はPNGで持っておくといいでしょう。変換するときは、透明部分を塗る背景色と容量の増え方を確認します。