続：PNG画像をより美しく、より軽量に最適化するテクニック

Post on:2009年7月27日

はじめに

あなたは既にPNGフォーマットの画像に精通しているかもしれません。PNGはGIFに代わる劣化のないフォーマットとして非常に優れたものです。ここでは、先日の「PNG画像の最適化テクニック」に続いて、いくつかのテクニックを紹介します。
Photoshopには存在しないグレースケールのPNG、色数をより少なくする方法、ディテールの最適化などを詳細に説明します。

1. グレースケールのPNG

PhotoshopではグレースケールのPNGで保存できません。
そこで、画像を白黒で保存した後でOptiPNGを使用します。

<textarea name="code" class="html" cols="60" rows="5">
optipng -o5 bw-image.png
</textarea>

optipng -o5 bw-image.png

</textarea>

上記のように半透明な箇所がある画像の場合、PNGで保存する前にモードをグレースケールにすることは非常に重要です。
グレースケールモード：[イメージ]-[モード]-[グレースケール]

2. 色数はより少なく

画像のカラーを減らす方法として、前回紹介したポスタリゼーションに代わる方法を紹介します。
この方法は256色限定で、カラーを最適化できます。

半透明の画像からイメージ箇所のみを抽出し（半透明は削除）、インデックスカラーに変換しマスクを適用します。
詳しい手順は下記の通り。

画像を開き、[イメージ]-[複製]で画像を複製します。
複製した画像に、[フィルタ]-[PhotoWiz]-[Remove Transparency]で透明箇所を取り除きます。
※「PhotoWiz」はRemove Transparencyを参照ください。
[イメージ]-[モード]-[インデックスカラー]を選択し、インデックスカラーのダイアログに「表示色：190、ディザ：誤差拡散法、量：80%」にし「OK」ボタンをクリックします。
イメージモードをRGBに戻して、オリジナルのファイルにイメージレイヤーをコピーします。コピーしたレイヤーを元に、そのマスクを適用し、PNG-24で保存します。

これらの簡単な作業で約12KBを軽量化しました。
OptiPNGを使用すると、さらに軽量化が可能です。この画像では51KBから33KBまで軽量化ができました。

この方法はFireworksの透過性のあるPNG-8とは異なります。ほとんどの場合に256色以下にし、PNG-24で保存します。
ソリッドな赤と50%透明な赤は異なる色であるということを忘れないでください。

3. ディテールの最適化

このテクニックはシャドウや反射、グロウを使用した画像に適しています。テクニックの根本は、不必要なディテールを減らすことです。

前回「手のはいってない透過」でも紹介した透過性のある画像は、それぞれのピクセルが4バイト（RGBA）で記述されます。最後のAはピクセルの透過性をコントロールするものです。
このアルファ値はほとんど見えないピクセルのため、RGBに置き換えて画像を圧縮することができます。

画像をPhotoshopで開きます。
サンプル画像
サンプルのラジオの画像は反射があるため、このテクニックは有用です。
レイヤーパレットでサムネイルを[Ctrl]+クリックして塗りを選択し、アルファパレットで新しいアルファチャンネルを作成します。
ほとんど見えないピクセルを調整します。
[イメージ]-[色調補正]-[2階調化]を選択し、しきい値を「170」にし「OK」ボタンをクリックします。
チャンネルパレットでRGBにし、レイヤーパレットに戻ります。[Ctrl]+[Shift]+クリックして透明箇所を選択し、[フィルタ]-[ノイズ]-[明るさの中間値]を選択し、半径を「5」にし「OK」ボタンをクリックします（下のキャプチャ）。

これをPNG-24で保存すると、最初の63KBの画像が59KBにサイズが軽量化できるのが確認できると思います。
3のしきい値と4の半径を変えることで、さらに軽量化することもできます。

4. More Tips

画像の最適化を行う際には、その画像に適したテクニックを使用する必要があります。
まずは、正確にその画像を分析することから始めてください。
クリエイティブを忘れないでください。
これらのテクニックは出発点として活用してください。
多くの人々は、ローカラーの場合PNG-24よりPNG-8が良いと思っているかもしれませんが、そうではありません。
時には、PNG-24を使用した方が良い場合もあります。
PNG-8とPNG-24のサンプル
Photoshopの前のバージョン（CS 3以前）を使用している場合は、PNG画像がブラウザとの表示で異なっているかもしれません。原因はPNG画像にgAMA chunkがイメージガンマをコントロールするためです。
これはTweakPNG（for Win）というツールを使用することで安全に削除することができます。
FireworksではPNG-8で半透明な画像をインデックスカラーで保存することができます。これはPhotoshopではできませんが、OptiPNGを併用することで可能です。
256色以下の画像の場合、OptiPNGはデフォルトでtrue colorイメージを8ビットのパレットに変換するでしょう。カラーとディテールのテクニックを使用して、色のナンバーを推測できます。しかし、それは非常に時間がかかるかもしれません。そこで、true colorイメージを256色のパレットに変換できる「PNGNQ」を使用します。
ただしIE6などでは、不透明なピクセルのみを表示します。
PhotoshopでPNGを保存する際に、「別名で保存」は使用しないでください。
必ず「Web およびデバイス用に保存」を使用します。