png8 png24 jpg100 jpg80 などの数字の違いを知ろう

デザイナーの教科書

現在のillustrator2019では、スクリーン用に書き出しをする際にPNG・JPG・SVG・PFDの4種類の保存形式が選べるようになっています。

今回は、このPNGやJPGのうしろに書かれている数字の違いについてご紹介します。

PNGの後につく数字

PNGのあとにつく数字はデータ内で表現できる色の数を表しています。

PNG24(無印)16,777,216色(2の24乗)
PNG8256色(2の8乗)

数字表記がなく無印のものはフルカラーのPNG24です。では、これらの違いを比較画像で見比べてみましょう。

色数が少ないPNG8の方は、毛並みの白色が若干発光しているように見えます。これはおそらく元写真の白色が、PNG8が持つ256色の中で一番近い色に置き換えられているからです。

またファイルサイズは以下の通りです。当然ですが、使う色数が多いほど大きくなります。

PNG24(無印)1.1 MB
PNG8414 KB

したがって、PNGでは次のように保存形式を使い分けるようにしましょう。

  • グラデーションや透過、ドロップシャドウなどを使っているならPNG24(無印)
  • 単純な塗りつぶしで構成しているならPNG8

JPGのあとにつく数字

JPGのあとにつく数字はデータの圧縮率を表しています。これはそのまま画質のクオリティと考えるとイメージしやすいです。

JPG100100%の画質クオリティで出力
JPG8080%の画質クオリティで出力
JPG5050%の画質クオリティで出力
JPG2020%の画質クオリティで出力

こちらも比較画像を用意してみました。

JPG100とJPG80の違いはあまりわかりませんが、JPG20では背景のぼやけ方にモアレのような部分が出てきています。

続いてファイルサイズも見てみましょう。

JPG100473 KB
JPG80212 KB
JPG5085 KB
JPG2068 KB

注目すべきはJPG100とJPG80。見た目の違いはほとんどありませんでしたが、ファイルサイズに2倍以上の差が出ています。

これらを踏まえると、画像を高画質で出力する場合でもJPG80程度に圧縮して、少しでもファイルサイズを軽くするのが良さそうです。

  • 高画質で出力するならJPG80
  • ほどほどの画質で出力するならJPG50
  • とにかくファイルサイズを軽くするならJPG20

まとめ

今回はillustratorの書き出し形式「PNG」「JPG」などに付いている数字の違いについて解説しました。

  • PNGのあとにつく数字はデータ内で表現できる色の数
  • JPGのあとにつく数字はデータの圧縮率

「数字が大きくなればなるほど元データの再現性が高くなる」と覚えておくと便利ですね。

JPG?PNG?GIF?WebP?もう困らない画像書き出しの最適化

2020年5月20日