最近、HTML5 について調べているんですが、いろんな場所で出てくる data URL scheme についてまとめておきたいと思います。
とりあえず data URL scheme ってのは以下の例を見てください。私の Twitter アイコンを変換してみました。
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAABGdBTUEAALGPC/xhBQAAAAFzUkdC...
長すぎるので省略しましたが、data から始まって MIME の指定があって、base64 という指定があって、英数字が並んでいます。詳しくは RFC 2397 - The "data" URL scheme を見てもらうとします。
簡単に説明してしまうと画像などのリソースを base64 変換してしまうことで、HTML や JavaScript 中に埋め込むためのスキームです。恐らくフォーマットは見ただけでわかってもらえると思いますが、base64 変換することでバイナリデータの扱いが可能となっています。
そして、この data URL scheme は HTML5 で追加された Canvas や File API では画像やファイルのデータを扱う際に利用されています。例えば Canvas で描画した結果を取得する際には toDataURL メソッドを呼び出します。
// 画像データを data URL で取得する var png = canvas.toDataURL();
同様に File API にも readAsDataURL メソッドという、結果を data URL として取得するためのメソッドが用意されています。
そして、取得した data URL は img タグの src 属性にセットしたり、CSS の background で指定したり、XHR などで送信したり、Cross-document messaging を使ってやり取りすることなどが出来ます。img の src にセットするとちゃんと画像なら表示されるので、小さい画像が沢山使われているページなどでは、直接埋め込んでしまった方が通信での遅延がなくなるので高速化されるかもしれませんね。
ちなみに IE8 では 32KB という制限がありましたが、IE9 からは 4GB まで大幅に制限が引き上げられました。みんな更新しましょうね。
