PNG画像をより美しく、より軽量に最適化するテクニック
Post on:2009年7月16日
sponsors
先日、紹介した「JPEG画像の最適化テクニック」に続いてSmashingMagazineから、PNG画像をより美しく、より軽量に最適化するテクニックを紹介します。
- 追記：2009/07/27
- 本エントリには続きがあります。
続：PNG画像をより美しく、より軽量に最適化するテクニック
Clever PNG Optimization Techniques
下記、各ポイントをピックアップして紹介します。
最後のはCS3向けで不明だったので、途中省略しています。
はじめに
ウェブデザイナーとしてあなたは既にPNGのフォーマットに精通しているかもしれません。PNGは劣化のないフォーマットとして、GIFの非常に良い代わりとなります。
Photoshop（あるいは他の画像編集ソフト）のユーザーは、PNG画像を最適化するためのオプションは多くないのではないか、と考えるかもしれません。そしてPNG-24は本当に最適化されているのかと考えるかもしれません。
このエントリーでは、その神話をあばこうとするものです。
PNG画像フォーマットの概要
画像最適化のテクニックに入る前に、PNGフォーマットについて若干の専門的な知識を学んでおいた方がよいでしょう。それは利点と欠点をもっており、PNG画像の品質と圧縮のためには重要なポイントとなります。
PNGはGIFフォーマットのオープンソース版として開発され、インデックスカラーなど共通の特徴がいくつかあります。
しかしながら、PNGは全ての局面でGIFより良いパフォーマンスを発揮するでしょう。
Scanline filtering
5x5の水平方向にグラデーションした画像を例にとります。
同じ色は、水平ではなく垂直に配置されています。
GIFフォーマットではこのような画像は水平に広がった色を圧縮するため、非常にひどい圧縮率になります。
この画像にPNGのScanline filtering（スキャンライン フィルタリング）を使用すると下記のようになります。
それぞれのラインの先頭にある「2」がフィルターの効果です。それぞれの縦のラインのピクセルは全て同じ色のため、2～5行目の値は「0」となっています。
もし、画像のサイズが大きいものであれば、こういったデータは効率よく圧縮されるでしょう。
スキャンライン フィルタリングは重要なテクニックで、非常に実用的なものです。下記は、GIFフォーマットとPNGフォーマットのサイズを比較したサンプルです。
このサンプルでは、GIFはPNGの7倍のサイズとなっています。
Image type
PNGについて知るべきもう一つの重要なことはイメージタイプです、メタデータがファイル内にストアされています。
Photoshopユーザーのあなたは、PNG-8（インデックス）、PNG-24（Trueカラー）に精通していることでしょう。FireworksユーザーはPNG-32（Trueカラー、透過アリ）を知っているかもしれません。PNG-24もTrueカラーで透過なので、非常に紛らわしいです。しかし、これらの名称はオフィシャルではない、ということを知っておいてください。これらはPNGの仕様で見つけだすことはできないでしょう。
PNGには5つのイメージタイプがあります。
- Grayscale
グレースケール - Truecolor
Trueカラー - Indexed-color
インデックスカラー - Grayscale with alpha
グレースケール（透過アリ） - Truecolor with alpha
Trueカラー（透過アリ）
最も悪いことは、これらのイメージタイプがPhotoshopでは3つのタイプになってしまってることです。
画質には大きな影響を与えませんが、これらの要素はファイルサイズに大きな影響を与えます。OptiPNGやpngcrushなどのツールを使用すると下記の恩恵を受けます。
- 多くの色を使用していない画像はインデックスカラーにする、など画像にあったイメージタイプを選択できます。
- 最も良いデルタ フィルターを使用できます。
- 最も良い圧縮を選択し、オプションでカラーを減らせます。
1. ポスタリゼーション
ポスタリゼーションはTrueカラーのイメージを最適化する方法としてよく知られています。
Photoshopで、[イメージ]-[色調補正]-[ポスタリゼーション]を選択してください。
「階調数」は可能な最小の量（通常40くらい）を選択します。
ポスタリゼーションは類似色を一つに変換し、色の量を減らします。このことはスキャンラインを実行させ、もっとも良い圧縮を得ることができます。
但し、上記のようにHTMLで指定した背景色と組み合わせる際は、色が異なることがあるので注意してください。
2. 手のはいってない透過
次の二つの透過PNG画像を見てください。
二つとも特別な最適化をしないでPhotoshopで保存しています。
これらの違いはピクセル単位で比較しても、あなたは気が付かないでしょう。けれども、左のファイルサイズは右の2倍もあります。
ここで使用したのは「Remove Transparency」というプラグインで、PhotoFreebies plugin suiteの「PhotoFreebies (Freeware)」に含まれているPhotoshop用のプラグインです。
このフィルタを適用すると、簡単に画像の透過箇所を処理します。
透過箇所の処理を行う際にマスクを使用すると、更にきれいに最適化できます。
3. 透過による分離
透過箇所があるためにPNG-24で重くする必要はありません。ソリッドな箇所と半透明な箇所がある画像は適切なフォーマットを使用することで余分なサイズを軽減することができます。
このグラフィカルな画像を使用して説明します。
適用範囲を選択し、チャンネルパレットでレイヤーマスクを追加します。
アルファチャンネルを選択した状態で、[イメージ]-[色調補正]-[2階調化]をクリックし、値を「255」にします。
マスク作業が完了したら、半透明な箇所のみコピーしたレイヤーを作成します。ソリッドな方はPNG-8、半透明な方はPNG-24で保存し、半透明なレイヤーはポスタリゼーションを応用することができます。
afterのポスタリゼーションは35を適用したものです。
※この方法は明白な欠点をもっています、それは一つの画像を作成するのに二つの画像を必要とすることです
4. マスクを活用
これから紹介するテクニックは、PNGに特化された最適化ではありません。しかし、マスクを使ったこの方法はきっと役立つでしょう。
これはPhotoshop CS3のキャプチャで、CS4ではこのプロパティは削除されてしまいました。
次の画像を例に進めます。
この画像で、まず注意を払いたいのは振り子の箇所です。これはイメージの中で非常に明るいスポットで、多くの人の注目を集めるでしょう。
振り子の周辺の色をスムーズにするため、100%のディザを設定します。
振り子は美しく見えるようになりましたが、背景にノイズが多くなってしまいました。
ディザの値を下げることでノイズを除くことはできますが、画質も同じくらい減少してしまいます。
この問題は、色の数とサイズを調整することで画質を保ちつつ行うことができます。
チャンネルパネルで、新しいチャンネルを作成します。
振り子が画質を改善するための最優先箇所であるとしたので、その箇所に白い円を描きます。
訳者注：
ここからの作業はCS 3が手元に無いため、詳細は省略させていただきます。
※CS4で削除されたプロパティを使用します。
中途半端で、すいません。
最終の結果は、下記のようになります。
sponsors
