2012/08/23

HTML5新鮮小物:Data URI

什麼是Data URI?

網頁中有很多地方要引用其他資源,例如:Script、Frame、Img、Style..etc.,就會輸入資源的URL,Data URI就是把資源的內容Base64 Encode或是URLEncode後,直接寫在URL的地方
Ex:
<img src="data:image/png,%89%50%4e%47%0d%0a%1a%0a%0d%49%48%44%52%10%10%01%03%25%3d%6d%22%06%50%4c%54%45%ff%ff%ff%a5%d9%9f%dd%33%49%44%41%54%78%9c%63%f8%ff%9f%e1%ff%5f%86%ff%9f%19%0e%b0%33%dc%3f%cc%70%7f%32%c3%cd%cd%0c%37%8d%19%ee%14%83%d0%bd%cf%0c%f7%81%52%cc%0c%0f%c0%e8%ff%7f%51%86%17%28%ce%5d%9b%50%49%45%4e%44%ae%42%60%82" />
或是
<img src="data:image/png;base64,iVBORw0KGgoAA
AANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0l
EQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6
P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC" />
效果:

好處:節省Request數量,有時候檔案真的太小了,這樣做比較快
壞處:Client佔用較多CPU、記憶體,還需要一點Decode的時間

特殊別用處:用JavaScript寫插件的時候很好用
Wikipedia: Data URI scheme

5 則留言:

  1. 想請問一下...什麼是"etc" ?!

    回覆刪除
    回覆
    1. http://translate.google.com/?source=osdd#auto|auto|et+cetera

      刪除
  2. 回覆
    1. Oh...還有這招阿 XDDD

      刪除
    2. 我發誓我絕對沒有偷吃別人的餅乾。(擦嘴)

      把二進位資料用 base64 編碼擺進 JSON 或 XML 也是一種用法,不過碰到這種狀況我會選擇直接用二進位的 BSON 就是了。(茶)

      刪除