不久前的台菲網路戰爭Anonymous侵入dns.gov.ph
除了取得了大量帳號密碼外，還置入了一個插旗網頁 (掌聲)
網頁當中有張圖片即是用了data URIs
究竟data URIs是什麼厲害的東西呢?
為什麼要使用data URIs?
如何使用data URIs?
Data URI scheme其實並不是個新技術，最早開始於1998年，已有十多年發展囉！只是現有的瀏覽器越來越普遍支援，因此被廣泛應用在網站優化上
網站使用data URIs最主要的優點
減少HTTP request，瀏覽器每下載一個圖檔或CSS就會觸發一個HTTP request，而每個HTTP流程都會額外產生HTTP Header、TCP/IP Header等資料量，data URIs則是將文件Base64編碼內嵌在網頁中不額外觸發HTTP request，因此較節省頻寬，Page speed更快速有效率。
如何使用data URIs
當我們要在網站中使用一張Css sprites圖示
傳統的圖片HTML是這樣用
<img src="images/icons.png"/>
data URI的格式如下
data:[<MIME類型>][;charset=<charset>][;編碼方法],<編碼資料>
首先將圖片以base64方法編碼
編碼工具有很多，這裡列舉兩個
1. Steve's Encode64 Utility
步驟1點選Select File，選擇要編碼的檔案
步驟2選擇完檔案後立刻就編碼完成，點選Copy to Clipboard，複製到剪貼簿
2. Data URL Maker
這個更厲害喔，將圖片拖進網頁Drag file here區塊中即可
編碼完成後將左側內容全選複製
接著將剛才使用工具1或工具2複製的編碼正確貼到HTML當中
<img src="貼在這裡" />
會像這樣
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUh略...(很長一串)" />
完成！這樣除了減少HTTP request之外，還有個好處就是不用再多上傳一張圖片檔到FTP上囉，這樣也不會有圖片失連的問題啦，因為已經內嵌在網頁裡囉 (偷笑)
data URIs也不是沒有缺點
Base64會使文件內容增加約33%
(雖然文件變大，但因減少HTTP額外產生資料量關係，實際是節省頻寬的)
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, I6IDFweCBrbgABACGA9DQo略... ' 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 URIs
雖然data URIs能夠減少HTTP
request提升頁面載入效率，但使用上還是有些注意事項需要依照您的網站現況衡量使用時機。
例如您的網站回訪率非常高，而data URI不會被瀏覽器緩存，因此每次內容都重新被下載，這就是一個不適合使用的狀況。
又或是您網站的訪客使用IE瀏覽器比例非常高，那就需要特別注意Base64編碼的大小需要小於32768 Bytes(約32KB)。
轉載自《awoo SEO研究團隊》
沒有留言:
張貼留言