Data Schema URL


Data Schema URLこれは古い技術ですが、私も最近知りました.
原因はQQ団体購入に行って良いものがあるかどうかを見て、それから退屈にfirebugを開けて、loadピクチャーのrequestが少ないことを発見して、そこでcss spriteを使ったのではないかと推測して、よく見ると、意外にもbase 64コードです.

url('data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD/
//+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4U
g9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC')
  top left no-repeat; }

最初は驚きましたが、cssがこれを解析できるなんて、後で考えてみると普通ですね.base 64はMIMEのencodingで、ほとんどのブラウザがMIMEをサポートしているので、decodeができます.decodeが終わったら2進ストリームが山積みになり、画像自体が2進ストリームで開いているので表示できます.
このようなメリットは、追加のhttp requestを省くことで、HTTPSでは効果がよくなります.
神器ではない神器FF 4は、以下の機能もサポートしています.
Alternatively, a browser can convert (encode) image based data from the clipboard to a data URI and paste it in a HTML editing field. Mozilla Firefox 4 supports this functionality.
これは最大の欠点です.
SB IE 6,7はサポートされていません