画像の形式でよく見かけるJPEGとPNG。
用途別にどちらを選んだほうが良いのか解説します。
先に結論を書くと、
- 写真などグラデーションのある画像の場合はJPEG。
- ホームページやブログなど、WEB上に載せる場合は、品質を85に設定したJPEG。
- 作業途中の画像や、加工を繰り返すなら、PNG。
- ロゴやアイコン等、色の境界がはっきりしているものはPNG。
- 透明な画像を扱いたい場合はPNG。
です。
JPEGとPNG、それぞれの特徴を見ながら、なぜ上記のような結論になるのか書いていこうと思います。
JPEGの特徴
- 読み方はジェイペグ。
- 拡張子の「.jpg」と「.jpeg」はまったく同じもの。jpgは拡張子の文字数制限があったころの名残。
- 不可逆圧縮。保存をするたびに品質が下がる。下がった品質を元に戻せない。
- 透過情報を扱えない。
- 色の境界がはっきりしているものにはノイズが目立ちやすい。グラデーションのあるもの（写真）に適している。
一般的に写真にはグラデーションがあり、JPEGとPNGの容量を比べると、JPEGの方が軽くなっています。
なので、写真はJPEGで保存するのをおすすめします。
また、WEB上に載せる写真の場合、保存する画質の設定は85が適しています。
Googleでは以下のように書かれています。
画質が 85 を超えている場合は、85 に下げます。画質が 85 を超えると画像の容量が急増しますが、視覚的な品質はほとんど向上しません。
GIF、PNG、JPEG 画像の最適化[developers.google.com]
では実際に試してみましょう。
「1920✕1280」の画像を「525✕350」にリサイズし、画質を変えて保存したものを掲載します。
画質90
ファイルサイズ44KB
画質85
ファイルサイズ35KB
画質50
ファイルサイズ17KB
画質20
ファイルサイズ10KB
画質90と85では私的にも違いがあるように見えません。
画質50だと色ムラがあるように見え、20だとそれが顕著に表れているのがわかると思います。
PNGの特徴
- 読み方はピング。拡張子は.png。
- 可逆圧縮。何度保存しても劣化しない。元の品質に戻すことができる。
- 透過情報を持てる。
- JPEGよりもファイルサイズが比較的大きい。
- PNGといっても種類がある。
JPEGは保存するたびに品質が劣化しますが、PNGはそうではありません。
作業途中の画像や、加工を繰り返す画像の場合に適しています。
図形やアイコンなどの場合もPNGを選ぶのをおすすめします。JPEGは色の境界がはっきりしているとノイズが目立つことがあるからです。
透過情報は、PNG-24という形式以外は扱うことができます。
以下で形式ごとの簡単な説明をします。
PNGの種類
PNG-8
使える色は256色。
用途はアイコン、ロゴなど、色数が少なくても表現できるもの。透過情報を持てる。
透明な部分は0か100かでしか選べない（半透明は扱えない）
下の画像は背景が透明。当サイトの背景設定を反映している。
わかりやすいように背景を一色で塗りつぶしたもの。
PNG-24
使える色はJPEGと同じ1677万色。
グラデーションのある画像にも適しているが、JPEGと比べるとファイルサイズが倍以上になる。
色の境界がはっきりしていてJPEGではノイズが気になる場合はこちらを選択。
ただし、それ以外では見た目に差異があるように見えないため、最終的に保存するならJPEGがおすすめ。
また透過情報を持てない。
下の画像は背景を白で塗りつぶした「307✕308」のPNG-24。圧縮レベルは最高の9で、ファイルサイズは30KB。
画像は掲載しませんが、これを画質85のJPEGに変換すると7KBになります。
PNG-32
PNG-24＋段階を持つ透明度の情報。
半透明の画像を扱える。
半透明を扱いたい場合はこちら。
その他の形式
JPEGとPNG以外で、よく見かける他の形式も簡単に紹介しておきます。
- GIF
.gif。日本ではジフ、欧米ではギフと呼ぶ人が多い。GIFの設計者は「ジフ」だと言及。
扱える色は256色。アイコンやGIFアニメ。 - BMP（ビットマップ）
.bmp。Windowの画像形式。無圧縮。 - TIFF（ティフ）
.tiff もしくは .tif。
圧縮もできるが、基本的には無圧縮。印刷への入稿に使われることも。
WEBブラウザでは扱えない。
まとめ
JPEGとPNG、どちらを選んだら良いか解説しました。
- 写真などグラデーションのある画像の場合はJPEG。
- ホームページやブログなど、WEB上に載せる場合は、品質を85に設定したJPEG。
- 作業途中の画像や、加工を繰り返すなら、PNG。
- ロゴやアイコン等、色の境界がはっきりしているものはPNG。
- 透明な画像を扱いたい場合はPNG。
このページが少しでもお役に立てたのなら幸いです。