不久前的台菲網路戰爭Anonymous侵入dns.gov.ph
除了取得了大量帳號密碼外，還置入了一個插旗網頁 (掌聲)
網頁當中有張圖片即是用了data URI scheme
Anonymous侵入dns.gov.ph
究竟data URI scheme是什麼厲害的東西呢?
為什麼要使用data URI scheme?
如何使用data URI scheme?
Data URI scheme其實並不是個新技術，最早開始於1998年，已有十多年發展囉！只是現有的瀏覽器越來越普遍支援，因此被廣泛應用在網站優化上
網站使用data URI scheme最主要的優點
減少HTTP request，瀏覽器每下載一個圖檔或CSS就會觸發一個HTTP request，而每個HTTP流程都會額外產生HTTP Header、TCP/IP Header等資料量，data URI scheme則是將文件Base64編碼內嵌在網頁中不額外觸發HTTP request，Page speed更快速有效率。
如何使用data URI scheme
當我們要在網站中使用一張CSS Sprites圖示
Css sprites icon
傳統的圖片HTML是這樣用
<img src=”images/icons.png”/>
data URI的格式如下
data:[<MIME類型>][;charset=<charset>][;編碼方法],<編碼資料>
首先將圖片以base64方法編碼
編碼工具有很多，這裡列舉兩個
1. Steve’s Encode64 Utility
Steve’s Encode64 Utility
步驟1點選Select File，選擇要編碼的檔案
Steve’s Encode64 Utility
步驟2選擇完檔案後立刻就編碼完成，點選Copy to Clipboard，複製到剪貼簿
2. Data URL Maker
Data URL Maker
這個更厲害喔，將圖片拖進網頁Drag file here區塊中即可
Data URL Maker
編碼完成後將左側內容全選複製
接著將剛才使用工具1或工具2複製的編碼正確貼到HTML當中
<img src=”貼在這裡” />
會像這樣
<img src=”data:image/png;base64,iVBORw0KGgoAAAANSUh略…(很長一串)” />
完成！這樣除了減少HTTP request之外，還有個好處就是不用再多上傳一張圖片檔到FTP上囉，這樣也不會有圖片失連的問題啦，因為已經內嵌在網頁裡囉 (偷笑)
data URI scheme也不是沒有缺點
Base64會使文件內容增加約33%
data URI不會被瀏覽器緩存
如果有需要在多個地方重複使用時請避免或使用CSS載入
內容如果更新，就需要重新產生一次編碼
data URI會使CSS和HTML看起來變得凌亂
大小限制，根據data URI的規範，data URI有字元的限制，IE8僅支援32768 Bytes，約32KB左右
IE8以下不支援，但可以透過使用CSS Hack解決
例如：
<link rel=”stylesheet” type=”text/css” href=”style.css” />
<!–[if lte IE 7]>
<link rel=”stylesheet” type=”text/css” href=”suck-ie.css” />
<![endif]–>
or…
#wrap {
background-image: url(‘data:image/png;base64,iVBORw0KGgoAAAANSUh略…’);
/* IE 6 and 7 */
*background-image: url(‘/images/icons.png’);
這方法不只可以用在image，也可以用於CSS、web font喔！若搭配CSS Sprites更是大大節省伺服器資源啊！
CSS：
<link href=’data:text/css;base64, I6IDFweCGA9DQo略…’ rel=”stylesheet” type=”text/css” />
web font：
@font-face{
font-family: “Foo Font”;
src: url(‘data:font/woff;charset=utf-8;base64,d09GRgABAAAAAG略…’) format(‘truetype’); }
依據網站現況使用data URI scheme
雖然data URI scheme能夠減少HTTP
request提升頁面載入效率，但使用上還是有些注意事項需要依照您的網站現況衡量使用時機。
例如您的網站回訪率非常高，而data URI不會被瀏覽器緩存，因此每次內容都重新被下載，這就是一個不適合使用的狀況。
又或是您網站的訪客使用IE瀏覽器比例非常高，那就需要特別注意Base64編碼的大小需要小於32768 Bytes(約32KB)。
(如何觀察網站現況可以參考Google Analytics 網站分析教學)
