JPGとPNGの違いを画質とファイルサイズで比較

今更ですが、僕は「JPG」と「PNG」の使い方を間違っていた様です・・・。

具体的には、今までPC画面のキャプチャ画像及びそれを編集した画像をJPGで保存していたのですが、PNGで保存した方が容量が小さくて綺麗じゃない！？という内容です。

ちなみに、GIFはGIFアニメーション以外で使うメリットを感じないので今回は触れません。

JPGとPNGの使い分け

難しい説明抜きで、ファイルサイズと画質だけを考慮してJPGとPNGの使い分けるとこうなります。

※JPG画像は全て最高画質で保存

ロゴ・アイコンについては、透過画像にできないJPGの選択肢はありません。キャプチャ画像、写真、イラストについては下記の検証結果を参考にして下さい。

JPGとPNGの違いについては、WikipediaのJPEGとの比較が参考になります。

ちなみに、PNGはIE6及びそれ以前のバージョンに対応していないという欠点がありますが、IE6のシェア率自体が1%もないはずですから、特に考慮する必要はないと思います。

キャプチャ画像

キャプチャ画像にテキスト文字や枠線を挿入した画像を比較してみます。

キャプチャする画面の色数が少ない程、PNG形式で保存した方が容量は小さくなります。

また、キャプチャ画像はJPG形式で保存するだけでも画質が劣化します。更に、キャプチャ画像に単色の文字や枠線を挿入すると、PNGに比べて大幅に容量が増加するだけでなく、挿入した文字や枠線の色の劣化（ノイズ）も目立ちます。特に赤色の劣化は目立ちます。

色数の多いイラストや写真をキャプチャしない限り、JPG形式で保存するメリットはありません。

ペイントツールだけで描いた画像も比較してみます。

ここまで色数が少ないと、JPGとPNGの容量の差は約9倍になります。

色によって劣化に差がありますが、JPGは全体的にくすんで見えます。色の境界がぼやけています。ただ、灰色や黒色は劣化が小さく、白色はほとんど劣化がありません。

PNGの方が容量は小さい。画質も綺麗。となれば、JPG形式で保存するメリットはありません。

写真

RAWファイルで保存した写真のデータをJPGとPNGで書き出して比較してみます。

違いはほとんど分かりません（僕には全く分かりません）。

PNGは無駄に容量が大きくなるだけですから、写真をPNG形式で保存するメリットはありません。

イラスト

PNG形式でダウンロードしたイラストをJPGとPNGで保存して比較してみます。

イラストは、ピアプロに投稿されているるみあさんの画像を使わせてもらいました。

上記の様なイラストの場合、違いはほとんど分かりません（僕には全く分かりません）。

ただ、JPGは透過画像にできません。また、加工を前提とする様な場合も、保存する度に劣化を伴うJPGは向いていません。色数の少ない輪郭のはっきりしたイラストにもJPGは向いていません。

イラストは、状況に応じて使い分けるのがベストだと思います。

最後に

いろいろ書きましたが、PC画面をキャプチャして編集した時は、PNG形式で保存した方が、容量も小さく、画質も綺麗になるよって話です（キャプチャする画面によっては容量が大きくなる）。

気になる方は、PNGとJPG両方で保存して画質やファイルサイズを比較してみて下さい。

また、イラストや写真については、ダウンロードしたファイルの形式に依存する部分が大きいですし、ブログで使う場合には特に気にする必要はないのかな。と思います。