PNG最適化テクニック

ニュース
トップ

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」のタイトルのもとで公開している。

関連したタグ
    

    マイナビニュースのセミナー情報

    オススメ記事

    マイナビニュースの集合特集

    関連記事

    関連サイト

    新着記事

    転職ノウハウ

    あなたの仕事適性診断
    あなたの仕事適性診断

    4つの診断で、自分の適性を見つめなおそう!

    Heroes File ~挑戦者たち~
    Heroes File ~挑戦者たち~

    働くこと・挑戦し続けることへの思いを綴ったインタビュー

    はじめての転職診断
    はじめての転職診断

    あなたにピッタリのアドバイスを読むことができます。

    転職Q&A
    転職Q&A

    転職に必要な情報が収集できます

    ドS美人面接官 vs モテたいエンジニア
    ドS美人面接官 vs モテたいエンジニア

    入室しようとしたら、マサカリ投げられちゃいました!?

    特別企画

    一覧

      人気記事

      一覧

      イチオシ記事

      新着記事

      特別企画

      一覧

        求人情報