PNGファイルを軽くする方法

PNGファイルを軽くする方法

Adobe Photoshop を使って軽いPNGファイルを書き出す方法を紹介します。
例えば、画像アセット機能を使って画像を大量に書き出すときなどに便利な方法です。

  1. ファイルサイズ小(8-bit)で書き出す
    1. 画像アセットを使って書き出す場合
    2. クイック書き出しを使って書き出す場合
    3. 書き出し形式で書き出す場合
    4. ファイルサイズ小(8-bit)のデメリット

ファイルサイズ小(8-bit)で書き出す

Adobe Photoshop で軽いPNGファイルを書き出すには「ファイルサイズ小(8-bit)」にチェックを入れます。
これは PNG-8 とはことなる書き出し形式で、PNG-24 のようにマットを必要としない透明部分を保持して書き出すことができます。
では、この方法の書き出し方法とデメリットを紹介します。

画像アセットを使って書き出す場合

画像アセットを使って「ファイルサイズ小(8-bit)」で書き出すには、レイヤー名を「example.png8」と指定します。
例えば、レイヤー名が example の場合。レイヤー名の最後につける拡張子 png のすぐ後に 8 追加して「example.png8」と指定します。
あとはメニューバーの「ファイル」から「生成」の「画像アセット」を選択してください。
「ファイルサイズ小(8-bit)」で書き出すには、画像アセットを使って書き出すのが一番簡単かもしれません。

クイック書き出しを使って書き出す場合

クイック書き出しを使って書き出す場合は「環境設定」の「書き出し」にある「クイック書き出し形式」の「ファイルサイズ小(8-bit)」にチェックを入れます。

このチェックが入ると、クイック書き出しを行うときは常に「ファイルサイズ小(8-bit)」が適用された状態で画像を書き出すことができます。

書き出し形式で書き出す場合

書き出し形式で書き出す場合は、メニューバーの「ファイル」から「書き出し」の「書き出し形式」を選択。表示される書き出し形式ウィンドウ内の「ファイル設定」にある「ファイルサイズ小(8-bit)」にチェックを入れます。

ファイルサイズ小(8-bit)のデメリット

ファイルサイズ小(8-bit)で書き出した場合にはデメリットがあります。
例えば、色の階調をグラデーションで表現していると、グラデーション部分が荒れた状態で書き出されてしまいます。
ただし、荒れが目立つと言っても、画像全体がグラデーションの画像の場合に目立つだけで、画像の内容によっては目立たないこともあるため、この書き出し方法は積極的に使って行けるのではと思います。

まとめ

Adobe Photoshop を使って軽いPNGファイルを書き出す方法を紹介しました。
この方法を使って書き出した画像を、tinypng などのサービスを利用して軽量化した場合。
この方法を使わなかった画像とファイルサイズを比較すると、この方法を使った画像の方がファイルサイズが軽くなることがほとんどだと思います。
ただし、画像によってはそんなに差が出ない場合もあるため、軽量化の手段の1つとして頭に入れておくと良いのではないでしょうか。