Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY.

Sergey Chikuyonok氏がSmashing Magazineにおいて「Clever PNG Optimization Techniques」のタイトルのもと、PNG画像を最適化するためのいくつかのテクニックを紹介している。このテクニックは、PNGエンコーダがどのようにデータを保存するかを調査することで得られたテクニックだと説明されている。

記事の中でSergey Chikuyonok氏は、まず、PNGで導入された機能のうち、特に次の2つを理解しておくことが重要だと説明。

スキャンラインフィルタリング (データフィルタ)

ピクセルのカラーを別のピクセルから得る方法。全ピクセルにカラー情報を持たせるのではなく、隣り合ったピクセルからの差分情報だけを指定することで圧縮率を引き上げる機能。次の5つの指定が可能。

  • None (フィルタなし)
  • Sub (左の値の分だけ減算する)
  • Up (上の値の分だけ減算する)
  • Average (左と上の値の平均値の分だけ減算する)
  • Paeth (上、左、左上のどれかの値の分だけ減算する)

イメージタイプ

PNGはファイルの種類を指定するメタデータをファイル内部に保持できる。次の5つのイメージタイプを保持可能。

  • グレースケール
  • トゥルーカラー
  • インデックスカラー(ビットトランスパレンシ、パレットトランスパレンシ)
  • アルファ付きグレースケール
  • アルファ付きトゥルーカラー

PNGの操作に関してはAdobe Fireworksが優れた機能を提供していると説明があるほか、画像品質を下げることなくファイルサイズの削減を実現するツールとしてOptiPNGとpngcrushが紹介されている。これらツールは次の機能を提供するという。

  • もっとも適切なイメージタイプを選ぶ
  • もっとも適切なデルタフィルタを選ぶ
  • もっとも適切な圧縮方法を選ぶ

さらに進んだ圧縮方法として、次の4つの手法が紹介されている。

  • ポスタリゼーション (類似カラーをある程度まとめてしまうことで、フィルタの効果が効きやすくする方法)
  • ダーティトランスパレンシ (完全透過になっている部分のオリジナル画像を真っ黒にする。強力な手法だがあまり知られていない方法)
  • トランスパレンシ分割 (透過データを含んだ画像を、透過なしのPNG-8と透過ありのPNG-24に分割して、さらにPNG-24の方にポスタリゼーションを実施する。効果はあるがファイルが2つになるため扱いにくいテクニックではある)
  • インフルエンスマスク (Photoshop CD4よりも前のバージョンで実施できる圧縮方法)

Sergey Chikuyonok氏はJPEGに関しても同じように画像の圧縮をさらに進めるための手法をSmashing Magazineにおいて「Clever JPEG Optimization Techniques」のタイトルのもとで公開している。