png
画像処理
HTTP
圧縮
webサイト

PNG画像の圧縮について

More than 3 years have passed since last update.

HTTP配信するWebサイトを作る上で、画像の最適化は手間に対してサイズの削減効果が大きいものです。ここでは、PNG画像について、ファイルフォーマットについて触れながら、いくつかある圧縮手法について解説していきます。


PNGフォーマット


チャンク

PNGファイルは、ファイル種別識別用の冒頭部のヘッダを除くと、いくつかのチャンク(データブロック)に分かれています。画像を構成する上で重要なチャンクは、以下のようなものがあります。



  • IHDR…画像の寸法、色数などが入ったヘッダー部分


  • PLTE…カラーパレット(インデックスカラーの場合のみ)


  • IDAT…画像データ(Deflate圧縮済み)


  • IEND…終端マーク


  • tRNS…透過色の設定

なお、チャンク名は4文字ですが、画像表示に必須なものは1文字目が大文字、なくても表示可能なものは1文字目が小文字となっています。これ以外にも各種のチャンクが定義されています。


カラータイプ

PNGのカラータイプとしては、いくつかのものが定義されています。

タイプ値
概要
詳細
tRNSチャンク

0
グレイスケール
最大256段階までの白黒の濃淡、パレットは不可
1色透過

2
RGB
24ビットカラー、パレットはなくてOK
1色透過

3
パレットカラー
24(32)ビット中256色
色ごとにアルファチャンネルを指定可

4
グレイスケール+アルファチャンネル
濃度8ビット+アルファチャンネル8ビット
なし

6
RGB+アルファチャンネル
RGB24ビット+アルファチャンネル8ビット
なし


画像データについて

画像本体のIDATチャンクは、複数に分けて生成することもできますが、容量は大きくなります。また、圧縮前に「フィルター」という処理をかけることができて、横の行単位で記録する値を「上のピクセルとの差分」や「左のピクセルとの差分」のように選ぶことができます(なお、フィルターは圧縮率を高めるためのもので、データは省略しない可逆なものです)。

そうして記録したビットデータは、Deflateというアルゴリズム(gzipと基本的には同じもの)で可逆圧縮して、ファイルに書き出します。


各種の圧縮手法

このように、いろいろなものから構成されているPNGファイルですが、(Webで使うことを前提に)圧縮するにも、いろんな手段があります。


不要なチャンクの削除

上で省略したPNGのチャンクの中には、テキストデータを保存するものなど、画像にまったく影響を与えないものもいくつかあります。また、カラープロファイルやガンマ値補正など、ブラウザで表示するだけにしては高度すぎる機能もあるので、そういったものを削除することで容量を削減することができます。


  • 画質への影響…無〜低

  • 効果…ファイルによりけり


IDATの連結

PNGファイルを書きだす環境によっては、処理の都合か、IDATを分割して出力していることがあります。これらをつないで1つにすることで、余計なヘッダは削減できますし、一回に圧縮する区間が長くなって、圧縮率が向上することもあります。


  • 画質への影響…無

  • 効果…無〜低


Deflateの効率化

PNGファイルを書きだす環境によっては、速度を優先して圧縮率の低い状態でDeflate圧縮を行なっていることがあります。圧縮率を優先して再度圧縮を行うことで、サイズが小さくなることもあります。


  • 画質への影響…無(Deflateは可逆圧縮です)

  • 効果…無〜中


フィルターの最適化

ちょっとした画像でも、行ごとに最適なフィルターの組み合わせを完璧に求めるには組み合わせが多すぎます。とはいえ、いろいろ試行錯誤して最適に近いフィルターを選んでくれるツールもあります。


  • 画質への影響…無

  • 効果…無〜低


減色

24ビットカラーの不要な画像について、256色に落としてしまうことで、画像のデータ量そのものを削減する方法です。なお、PNGでは上にあるようにパレットカラーでも実質アルファチャンネル付きの32ビットカラーを使用可能ですので、透明・半透明画像でもその表現を保ったまま256色にできます。

色を落としたらどういう見え方をするかですが、もともと色の少ないイラストはもちろんのこと、画像単位で256色ということで、写真などでも意外と目立たないものです。とはいえ、人工的なグラデーションがある画像や、あまり関連しない画像を混ぜたようなスプライトでは、色化けが目立ってしまうこともあります。理想論を言えば、1つ1つ確認すべきでしょう。

なお、ツールによっては、本当に256色以下しかない画像について、自動でパレットカラーに変換する例があります。この場合は、画質に影響はありません。


  • 画質への影響…低〜高

  • 効果…中〜高


圧縮ツール


PNGGauntlet

PNGを圧縮するためのコマンドラインツールはいくつかありますが、それぞれ取る戦略が違います。PNGGauntletは、4つぐらいのPNG圧縮ツールで試行錯誤を行なって、さらにはGUIフロントエンドを付けた、Windows向けのツールです。画質に影響しない可逆圧縮しか行いませんが(色数の少ない画像がパレットカラーに変換されることはあります)、ものによってはこれだけでもかなり圧縮できることがあります。

なお、いくつかのツールを内部で併用するという性質上、同じファイルを2度3度圧縮にかけると、そのたびにサイズが縮小する、ということもときおり発生します。


TinyPNG

TinyPNGは、PNGファイルを256色に減色する圧縮ツールですが、特徴として透過・半透過を扱えるということがあります。パレットカラーのアルファチャンネルまで入れられるツールはそう多くないので、重宝しています。


参考URL