Data Schema URL

Data Schema URL이것은 오래된 기술인데, 나도 최근에야 비로소 알았다.
QQ에 가서 좋은 물건이 있는지 단체로 구매한 후에 심심하게 Firebug를 열었는데load 그림의 Request가 매우 적다는 것을 발견하여 css sprite를 사용했는지 추측했다. 자세히 보니 베이스 64 코드가 한 덩어리였다.

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

처음에 의아하게 생각했는데 css가 이 물건을 해석할 수 있다는 것이 나중에 생각해 보니 정상이었어요. 베이스64는 MIME의 일종인 encoding이고 대부분의 브라우저가 MIME를 지원하기 때문에 decode를 할 수 있었어요.decode가 끝난 후에 2진수 흐름이 무더기로 있는데 그림 자체가 2진수 흐름으로 열려 있어서 표시할 수 있습니다.
이렇게 하면 추가 http request를 절약하고 HTTPS에서 효과가 좋을 수 있다.
신기가 아닌 신기 FF4는 다음과 같은 기능도 지원한다.
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 IE6, 7은 지원되지 않음