PNG最適化テクニック

後藤大地  [2009/07/22]

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が優れた機能を提供していると説明があるほか、画像品質を下げることなくファイルサイズの削減を実現するツールとしてOptiPNGpngcrushが紹介されている。これらツールは次の機能を提供するという。

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

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

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

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



転職ノウハウ

あなたが本領発揮できる仕事を診断
あなたの仕事適性診断

シゴト性格・弱点が20の質問でサクッと分かる!

「仕事辞めたい……」その理由は?
「仕事辞めたい……」その理由は?

71%の人が仕事を辞めたいと思った経験あり。その理由と対処法は?

3年後の年収どうなる? 年収予報
3年後の年収どうなる? 年収予報

今の年収は適正? 3年後は? あなたの年収をデータに基づき予報します。

激務な職場を辞めたいが、美女が邪魔して辞められない
激務な職場を辞めたいが、美女が邪魔して辞められない

美人上司と可愛い過ぎる後輩に挟まれるエンジニアの悩み

特別企画 PR

人気記事

一覧

イチオシ記事

新着記事

10代女子の告白!じつはわたし○○フェチです
[21:00 5/2] パートナーニュース
「“4月に雪”並みの珍事」…地元紙、3年ぶりゴールの長谷部に祝福と高評価
[20:53 5/2] パートナーニュース
[ちはやふる]映画後編「下の句」が前編の動員&興収上回る
[20:53 5/2] エンタメ
ジャンプ流!9号は「ハイキュー!!」古舘春一にスポーツ描写術を学ぶ
[20:46 5/2] ホビー
「To LOVEる」“脱がせる画集”第2弾!ARでイラストがスケスケに
[20:27 5/2] ホビー

特別企画 PR

求人情報