不久前的台菲網路戰爭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研究團隊》
沒有留言:
張貼留言