Ajaxian

IE9がCanvas要素をサポートすることで、これまで広く使われてこなかったテクニックが、もしかしたら注目されることになるかもしれない。Ajaxianに掲載されているWant to pack JS and CSS really well? Convert it to a PNG and unpack it via Canvasという記事で、2008年に公開されたJacob Seidelin氏の記事"Compression using Canvas and PNG-embedded data - Nihilogic"がふたたび取り上げられており、その可能性を示すものとして興味深い。

Compression using Canvas and PNG-embedded dataで紹介されているテクニックは、JavaScriptやCSSをPNG画像データとして利用するというもの。もちろん、生成されるPNG画像は画像そのものとしての意味はない。ノイズがのったような画像が表示されるだけだ。テキストデータをPNG形式の可逆圧縮にかけるところがポイントとなる。要するに、PNGの圧縮機能をテキストデータの圧縮に利用するわけだ。

JavaScriptやCSSをPNGデータに変換して配布し、クライアント側ではCanvas要素を経由してデータを取り出す。ここでテキストデータに展開してJavaScriptおよびCSSとして動作するようにすればいい。JPEGは非可逆圧縮なのでこのテクニックは使えないし、GIFはPNGよりも圧縮率が悪い。状況を考えるとPNGを圧縮形式として使うのがリーズナブルというわけだ。

順当に考えればPNG画像をこうした用途に使うことはない。通常はGZIP圧縮通信を利用する方がスマートだ。しかし興味深いアプローチともいえる。Ajaxianの記事によるとIE9のCanvas実装にはバグがあるようだが、IE9でも動作するようになれば、主要なすべてのブラウザで利用できるテクニックになる。