徹底比較！JPEG 対 PNG

画像フォーマットには沢山の種類が存在しますが、おそらく「JPEG」と「PNG」の普及が最も進んでいるのではないかと思います。

特にウェブサイトにおいては JPEG か PNG のどちらかを採用しているサイトが現状だと圧倒的に多いです。

このページではこの「JPEG」と「PNG」の比較を行います。

JPEG

Joint Photographic Experts Groupの略で、「ジェイペグ」と呼ばれます。

拡張子は「.jpg」や「.jpeg」で、写真の保存やWebで用いられています。非可逆圧縮の画像フォーマットです。

Exifを持たせることで撮影情報を保持することが可能です。

PNG

Portable Network Graficsの略で、「ピング」や「ピーエヌジー」と呼ばれます。

拡張子は「.png」で、主にネットワークや Web 上で用いられています。可逆圧縮の画像フォーマットです。

透明度を表すアルファチャンネルを持たせることも可能です。

非可逆圧縮と可逆圧縮

JPEG と PNGの一番の違いはココだと思います。

JPEG は非可逆圧縮であり、PNG は可逆圧縮です。

非可逆圧縮

JPEG に用いられる非可逆圧縮とは「圧縮すると完全に復元することが不可能」な圧縮方式です。

圧縮時にデータ量を削減するために情報を捨てます。その分データ量は減りますが、復元時に元のデータを完全に再現することができなくなります。

可逆圧縮

逆にPNGに用いられる可逆圧縮は「圧縮しても完全に復元可能」な圧縮方式です。

データの圧縮は行いますが、その圧縮データから元のデータを完全に再現できるように圧縮を行います。そのため基本的にデータを圧縮できる量が減ります。

重要なポイントは非可逆圧縮圧縮では圧縮時に情報を捨ててしまうことです。この捨ててしまった情報は基本的に後から元に戻すことができません。

比較方法

ここからは実際に JPEG と PNG とで画質、圧縮率、圧縮と復元のスピードを比較していきたいと思います。

JPEG と PNG の圧縮・復元には libjpeg と libpng をそれぞれ用いて行います。

libjpeg と libpng については下記でインストール方法やC言語での使い方を解説していますので興味があればご参照ください。

【C言語】libjpegのインストールと使用方法・使用例

【C言語】libpngのインストールと使用方法・使用例

 JPEG は画質を0 – 100の値で設定することが可能ですので、ここでは画質 50 と画質 100 で設定したもので比較を行います（サンプリング比は 4:4:4 としています）。

まとめると、

• JPEG(50)
• JPEG(100)
• PNG

の三種類で比較を行っていきます。

画質の比較

非可逆圧縮と可逆圧縮の圧縮方式の違いにより JPEG と PNG で画質に差が出ます。

ベタ塗りの多い画像

ベタ塗りの多い画像を JPEG(50)・JPEG(100)・PNG のそれぞれで圧縮したものを表示した結果はそれぞれ下のようになります。

JPEG(50)

JPEG(100)

PNG

遠目で見ると３つの違いは分かりませんが、拡大してみると JPEG(50) は若干ノイズがのっていることが確認できます。

JPEG(50)拡大

PNG拡大

圧縮時に情報を捨てたため、このボヤける現象が発生しています。

PNGはそのボヤけが発生していません。これは情報を捨てずに圧縮しているためです。元の画像を完全に復元することができます。

次は元データと JPEG(50)・JPEG(100) の差分を強調した画像が下の画像になります（元画像から RGB の輝度値の差分を取り、その差分の最大値と最小値の範囲を強調して表示しています。JPEG(50)、JPEG(100)共に -45 から 46 の範囲を強調して表示しています）。

JPEG(50)差分画像

JPEG(100)差分画像

差分を強調すると JPEG(50) の方は白と黒の切り替わりのところで誤差が発生してしまっていることが確認できます。

JPEG(100) の場合はほぼグレーで分かりにくいですが、ちょっとだけ差分が出ています。

風景画像

下記が風景画像を JPEG(50)・JPEG(100) と PNG で比較した結果になります。

JPEG(50)

JPEG(100)

PNG

画像全体で見てもほとんど画像変わらないですね。

葉っぱの一部分を拡大した場合の JPEG(50) と PNG は下のようになります。

JPEG(50)拡大

PNG拡大

JPEG(50) の時は８x８ピクセルごとに境目があるように見えますね。

これが JPEG 特有のブロックノイズというものです。遠目で見ると違いはわかりませんが、拡大してみると JPEG ではこのようなブロックノイズが発生します。ただし、風景写真のような元々が色が多くてグラデーションっぽい部分が多い画像では人間の目では感知しにくいノイズになっています。

次は元データと JPEG(50)・JPEG(100) の差分が下の画像になります（元画像から RGB の輝度値の差分を取り、その差分の最大値と最小値の範囲を強調して表示しています。JPEG(50)、JPEG(100)共に -67 から 56 の範囲を強調して表示しています）。

JPEG(50)差分

JPEG(100)拡大

差分画像で確認すると JPEG(50) では輪郭付近に差分が発生していることが確認できると思います。

JPEG(100) だとほぼ差分は確認できませんが、拡大してみると所々に差分が発生していることが確認できます。

画質の比較まとめ

ちょっと長くなってしまったのでまとめておきます。

まず PNG ですが、可逆圧縮なので当然画質は良いです。PNG 圧縮による画質の劣化は０です。

一方、JPEG 圧縮でも遠目に見ると人間の目に劣化が分かるような差は出ません。ただし、拡大画像や差分画像を確認するとはっきりとノイズが発生し、劣化していることが確認できました。

どうしても画質劣化させたくない場合はやはり PNG の方が良いと思います。

圧縮率の比較

ファイルサイズ（Byte）

圧縮率（データ削減率）（％）

圧縮率の比較まとめ

得手不得手がはっきり現れる結果になったと思います。

風景写真のようなグラデーションの多い画像は JPEG が圧倒的に圧縮率が高いです。一方で、ベタ塗りの多い画像の場合は逆に JPEG の方が圧縮率が低くなってしまっています。

せっかくサイズを小さくするために情報を捨てて画質劣化させたのにこの結果なのはちょっと残念ですよね。

速度の比較

圧縮時間（ミリ秒）

復元時間（ミリ秒）

速度の比較まとめ

特に圧縮速度に関しては JPEG の圧勝です。

風景写真においては PNG の圧縮時間は JPEG の約８倍になります。復元速度も JPEG の方が速いですが、差は縮まっています。

特に Web ページ表示などでは圧縮は一度で、復元はページにアクセスされるたびに毎回行われることになりますので、復元速度の方が重要になります。PNG は Web ページ表示でも使えるように復元速度は高速になっているようです。

機能の比較

機能的にもこの２つのファイルフォーマットは異なります。違いを見てみましょう。

透過処理

PNGでは各画素に色を表すRGBだけでなく不透過度を表すアルファチャンネルの情報を持たせることができます。

このアルファチャンネルを利用して画像の特定の部分や背景を透明にすることが可能です。

例えば下の画像は二つとも全く同じPNG画像データですが、透明度に設定した画素部分に背景の色が透けて見えるので異なる画像に見えます。

こういった透過処理はJPEGでは対応していない機能になります。

Exif

Exifとは Exchangeable image file format の略で、簡単に言うと撮影情報を保存するファイルフォーマットです。

例えば撮影に用いたカメラや撮影した位置、撮影した時のカメラの向きなどの情報を保存することができます。

JPEG では JPEG データ内に Exif を持たせることが可能ですが、PNG では現状対応していません。

後からどこで撮影したが分かりますし、Exif の情報を用いて画像をより綺麗に見せることも可能になるのですが、Exif を付けたままウェブにアップしてしまうと撮影場所が特定されてしまう危険性もあります。

使い方を誤ると不便＆危険なので Exif 情報を使いたくない方は PNG を使うのもありかもしれません。

機能の比較まとめ

PNG でしかできないこと、JPEG でしかできないことがあります。この機能の面も考慮してフォーマットを選択するようにしましょう。

また、一度でも PNG から JPEG に変換するとアルファチャンネルは失われますし、逆に JPEG から PNG に変換すると Exif は失われてしまいますので注意しましょう。

まとめ

画質に関してはPNG、圧縮率や速度に関しては基本的にJPEGが有利といったところだと思います。

ただし、PNG はベタ塗りの多い画像、JPEG は風景などの自然画像といった得意分野もありますので、このあたりも考慮して画像フォーマットを選択すると良いと思います。

個人的には、迷ったら PNG を選択するのがオススメだと思っています。

最初の方に説明したように JPEG 圧縮すると情報が失われ、その情報はもう復元することができません。これが私は嫌なので基本的に PNG で画像を保存しています。

Web にアップロードする場合はサイズに応じてそれを JPEG に変換したりしますが、原本として PNG は自分の PC や NAS に保持するようにしています。

変更履歴

2020/4/16

比較に用いる JPEG データのサンプリング比を 4:2:0 のものから 4:4:4 のものに変更しました。