HTMLに画像も含める、IE8登場後には使うシーンもあるか

The "data" URL schemeを使ってWebページやCSSファイルにバイナリデータ、特に画像を含めるというのは、現状においてはバッドノウハウでしかないかもしれない。しかしながらいくつかのレアなケースにおいては有効なテクニックでもある。現状直ぐに採用するといったテクニックではないが、そういった技術があることは知っておいても損はないだろう。

SitePointにおいてMeitar Moscovitz氏がWhy The data: URI Scheme Could Help Save Your Slow SiteのタイトルでThe "data" URL schemeを使う方法を紹介している。The "data" URL schemeはRFC2397で定義されているテクニックで、「data:[][;base64],」のようにHTMLやCSSに直接バイナリデータを埋め込むことが可能になるものだ。

HTMLにすべて埋め込むことはメンテナンス性の低下を招くが、HTTPリクエストの回数を削減できるという効果がある。同様の機能としてはCSS Sprite Generatorを使った画像を1枚の画像に結合してCSSで切り貼りして表示するというテクニックがある。素性のよさからしてCSS Sprite Generatorを使うべきだが、The "data" URL schemeだとCSS Sprite Generatorでは最低1回は発生してしまう画像のGETすら削減できるという効果はある。

The "data" URL schemeはどうしてもHTTPリクエストを極限まで削減したいという稀なケースのほか、CSSのみでフレームワークを作成するといった用途(つまりCSSファイルの中に画像データも含めておきたい場合)や、JavaScript/CSS圧縮プログラムのように作成後に最適化をかける場面での活用が期待できる。

しかし、Firefox、Safari、Opera、Chromeというブラウザが同機能をサポートしているなか、最大シェアを誇るIEが同機能に対応していない。IE8ではサポートが実現されるのではないかとみられるが、現状では最大シェアを捨てるというのは考えにくい選択肢だ。このため今すぐ適用できるというテクニックではないが、もしかしたら将来同テクニックに出会う時がくるかもしれない。どういった技術であるかは知っておいても損はないだろう。