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

先日、紹介した「PNG画像の最適化テクニック」の第二弾をSmashingMagazineから紹介します。

PNG Optimization: More Clever Techniques

PNG Optimization Guide: More Clever Techniques

はじめに

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

1. グレースケールのPNG

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

サンプルのキャプチャ

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

2. 色数はより少なく

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

サンプルのキャプチャ

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

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

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

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

3. ディテールの最適化

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

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

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

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

4. More Tips

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

PNG-8とPNG-24のサンプル

サンプルのキャプチャ

このサンプルでは、PNG-8にピクセルの色を記述するために3バイトのオーバーヘッドがあります。PNG-24では、この3バイトはありません。
透過無しでローカラーのPNGを使用する際は、PNG-8とPNG-24でどちらがより軽量か試すようにしてください。

5. Video Tutorial

これらのテクニックをどのように使用しているかのビデオ チュートリアルの紹介です。

チュートリアルのキャプチャ

Advanced PNG Optimization

Smashing Magazineのサイトでは、これら最適化を行ったPNGとPSDファイルをダウンロードできます。
最適化のビフォーとアフター

sponsors

top of page

©2018 coliss