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