徹底比較!JPEG 対 PNG

画像フォーマットには沢山の種類が存在しますが、おそらくJPEGとPNGの普及が最も進んでいるのではないかと思います。特にWebにおいては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言語での使い方を解説していますので興味があればご参照ください。

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

 JPEGは画質を0 – 100の値で設定することが可能ですので、ここでは画質50と画質100で設定したもので比較を行います。

まとめると、

・JPEG(50)
・JPEG(100)
・PNG

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

画質の比較

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

ベタ塗りの多い画像

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

JPEG(50)

JPEG(100)

PNG

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

JPEG(50)拡大

PNG拡大

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

次は元データとJPEG(50)・JPEG(100)の差分を強調した画像が下の画像になります。

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)の時は8x8ピクセルごとに境目があるように見えますね。これがJPEG特有のブロックノイズというものです。遠目で見ると違いはわかりませんが、拡大してみるとJPEGではこのようなブロックノイズが発生します。ただし、風景写真のような元々が色が多くてグラデーションっぽい部分が多い画像では人間の目では感知しにくいノイズになっています。

次は元データとJPEG(50)・JPEG(100)の差分が下の画像になります。

JPEG(50)差分

JPEG(100)拡大

画像をそのまま確認してもほとんどPNGとJPEGで差がわかりませんでしたが、差分画像だと拡大するとモヤのような差分が発生していることが確認できると思います。

画質の比較まとめ

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

まずPNGですが、可逆圧縮なので画質は良いです。PNG圧縮による画質の劣化は0です。一方、JPEG圧縮でも人間の目に劣化がはっきりと分かるような差は出ません。ただし、拡大画像や差分画像を確認するとはっきりとノイズが発生し、劣化していることが確認できました。どうしても画質劣化させたくない場合はやはりPNGの方が良いと思います。

圧縮率の比較

ファイルサイズ(Byte)

フォーマット風景写真ベタ塗り多め
ビットマップ3657830436578304
PNG1140761243569
JPEG(100)4827850388814
JPEG(50)650837324279

圧縮率(データ削減率)(%)

フォーマット風景写真ベタ塗り多め
ビットマップ00
PNG68.899.9
JPEG(100)86.898.9
JPEG(50)98.299.1

圧縮率の比較まとめ

得手不得手がはっきり現れる結果になったと思います。風景写真のようなグラデーションの多い画像はJPEGが圧倒的に圧縮率が高いです。一方で、ベタ塗りの多い画像の場合は逆にJPEGの方が圧縮率が低くなってしまっています。せっかくサイズを小さくするために情報を捨てて画質劣化させたのにこの結果なのはちょっと残念ですよね。

速度の比較

圧縮時間(ミリ秒)

フォーマット風景写真ベタ塗り多め
PNG5715643
JPEG(100)536245
JPEG(50)332270

復元時間(ミリ秒)

フォーマット風景写真ベタ塗り多め
PNG400153
JPEG(100)267127
JPEG(50)174155

速度の比較まとめ

特に圧縮速度に関してはJPEGの圧勝です。風景写真においてはPNGの圧縮時間はJPEGの10倍以上になります。復元速度もJPEGの方が速いですが、差は縮まっています。特にWebページ表示などでは圧縮は一度で、復元はページにアクセスされるたびに毎回行われることになりますので、復元速度の方が重要になります。PNGはWebページ表示でも使えるように復元速度は高速になっているようです。

機能の比較

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

透過処理

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

このアルファチャンネルを利用して画像の特定の部分や背景を透明にすることが可能です。例えば下の画像は二つとも全く同じPNG画像データですが、透明度に設定した画素部分に背景の色が透けて見えるので異なる画像に見えます。

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

Exif

ExifとはExchangeable image file formatの略で簡単に言うと撮影情報を保存するファイルフォーマットです。例えば撮影に用いたカメラや撮影した位置、撮影した時のカメラの向きなどの情報を保存することができます。

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

後からどこで撮影したが分かりますし、Exifの情報を用いて画像をより綺麗に見せることも可能になるのですが、下のページに書いてるように使い方を誤ると不便&危険なのでExif情報を逆に使いたくない方はPNGを使うのもありかもしれません。

iPhoneで撮った画像が勝手に回転してる問題 画像のアップロードは危険!?理由と対策をまとめてみた!

機能の比較まとめ

PNGでしかできないこと、JPEGでしかできないことがあります。この機能の面も考慮してフォーマットを選択するようにしましょう。また、一度でもPNGからJPEGに変換するとアルファチャンネルは失われますし、逆にJPEGからPNGに変換するとExifは失われてしまいますので注意しましょう。

まとめ

画質に関してはPNG、圧縮率や速度に関しては基本的にJPEGが有利といったところだと思います。ただし、PNGはベタ塗りの多い画像、JPEGは風景などの自然画像といった得意分野もありますので、このあたりも考慮して画像フォーマットを選択すると良いと思います。

個人的には、迷ったらPNGを選択するのがオススメだと思っています。最初の方に説明したようにJPEG圧縮すると情報が失われ、その情報はもう復元することができません。これが私は嫌なので基本的にPNGで画像を保存しています。Webにアップロードする場合はサイズに応じてそれをJPEGに変換したりしますが、原本としてPNGは自分のPCやNASに保持するようにしています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です