現在のillustrator2019では、スクリーン用に書き出しをする際にPNG・JPG・SVG・PFDの4種類の保存形式が選べるようになっています。
今回は、このPNGやJPGのうしろに書かれている数字の違いについてご紹介します。
PNGの後につく数字
PNGのあとにつく数字はデータ内で表現できる色の数を表しています。
| PNG24(無印) | 16,777,216色(2の24乗) |
| PNG8 | 256色(2の8乗) |
数字表記がなく無印のものはフルカラーのPNG24です。では、これらの違いを比較画像で見比べてみましょう。
色数が少ないPNG8の方は、毛並みの白色が若干発光しているように見えます。これはおそらく元写真の白色が、PNG8が持つ256色の中で一番近い色に置き換えられているからです。
またファイルサイズは以下の通りです。当然ですが、使う色数が多いほど大きくなります。
| PNG24(無印) | 1.1 MB |
| PNG8 | 414 KB |
したがって、PNGでは次のように保存形式を使い分けるようにしましょう。
- グラデーションや透過、ドロップシャドウなどを使っているならPNG24(無印)
- 単純な塗りつぶしで構成しているならPNG8
JPGのあとにつく数字
JPGのあとにつく数字はデータの圧縮率を表しています。これはそのまま画質のクオリティと考えるとイメージしやすいです。
| JPG100 | 100%の画質クオリティで出力 |
| JPG80 | 80%の画質クオリティで出力 |
| JPG50 | 50%の画質クオリティで出力 |
| JPG20 | 20%の画質クオリティで出力 |
こちらも比較画像を用意してみました。
JPG100とJPG80の違いはあまりわかりませんが、JPG20では背景のぼやけ方にモアレのような部分が出てきています。
続いてファイルサイズも見てみましょう。
| JPG100 | 473 KB |
| JPG80 | 212 KB |
| JPG50 | 85 KB |
| JPG20 | 68 KB |
注目すべきはJPG100とJPG80。見た目の違いはほとんどありませんでしたが、ファイルサイズに2倍以上の差が出ています。
これらを踏まえると、画像を高画質で出力する場合でもJPG80程度に圧縮して、少しでもファイルサイズを軽くするのが良さそうです。
- 高画質で出力するならJPG80
- ほどほどの画質で出力するならJPG50
- とにかくファイルサイズを軽くするならJPG20
まとめ
今回はillustratorの書き出し形式「PNG」「JPG」などに付いている数字の違いについて解説しました。
- PNGのあとにつく数字はデータ内で表現できる色の数
- JPGのあとにつく数字はデータの圧縮率
「数字が大きくなればなるほど元データの再現性が高くなる」と覚えておくと便利ですね。
