Data URI
Data URI 是由 RFC 2397 定義的一種把小文件直接嵌入文檔的方案。通過如下語法就可以把小文件變成指定編碼直接嵌入到頁面中:
data:[<MIME-type>][;base64],<data>
在上個世紀 HTML4.01引入了Data URI方案 ,到今天為止除了IE6和IE7之外,所有主流浏覽器都支持,但IE8對Data URI的支持還是有限制的,只支持object(僅是圖片時)、img、input type=image、link和CSS中的URL,且數據量不能大於32K。
優點:
缺點:
MHTML
MHTML是MIME HTML (Multipurpose Internet Mail Extension HTML)的縮寫,是由RFC 2557定義的把一個多媒體的頁面所有內容都保存到同一個文檔解決方案。這個方案是由微軟提出從IE5.0開始支持,另外Opera9.0也開始支持,Safari可以把文件保存為.mht(MHTML文件的後綴)格式,但不支持顯示它。
MHTML和Data URI還比較類似,有更強大的功能和更復雜的語法,並且沒有Data URI中“無法被重復利用”的缺點,但MHTML使用起來不夠靈活方便,比如對資源引用的URL在mht文件中可以是相對地址,否則必須是絕對地址。hedger在《Cross Browser Base64 Encoded Images Embedded in HTML》針對IE的解決方案使用的是相對路徑就是因為聲明了Content-type:message/rfc822使IE按照MHTML來解析,如果不修改Content-type則需要使用MHTML協議,這個時候必須使用絕對路徑,如《MHTML – when you need data: URIs in IE7 and under》。
應用
Data URI和MHTML兩者的配合可以完整的解決所有的主流浏覽器,它們由於無法被緩存和重復利用的缺陷,所以並不適合直接在頁面中使用,但在CSS和JavaScript文件中對圖片適當地使用有非常大的優越性:
為了方便在CSS中實現Data URI和MHTML,我寫了一個Data URI & MHTML 生成器,你可以看利用其生成Data URI & MHTML應用實例。
在CSS文件中使用應用MHTML時URL必須使用絕對路徑,導致非常不靈活,所以可以考慮使用CSS expression來解決(DEMO),比如:
/*
http://old9.blogsome.com/2008/10/26/css-expression-reloaded/
http://dancewithnet.com/2009/07/27/get-right-url-from-html/
*/
*background-image:expression(function(ele){
ele.style.backgroundImage = 'url(mhtml:' +
document.getElementById('data-uri-css').getAttribute('href',4) +
'!03114501408821761.gif)';
}(this));