Friday, May 20, 2011

HTML5 Mobile Web 系列:小圖示請使用 Data URI

引用網址 :http://blog.ericsk.org/archives/1436/trackback


使用 Data URI 可以節省 request 的數量。


首先以一個直接的例子來說明什麼是 Data URI,假設我有一張 PNG 圖片,像是這樣:


在網頁上嵌入的語法很簡單,就是 <img src="圖片路徑" width="寬" height="高">,但是這樣一來瀏覽器便需要多送出一個 reuqest 取得這張圖片,如果一個頁面上的圖片很多,對於網頁存取的速度就會有很深的影響(尤其是手機上的瀏覽器),除了可以使用 CSS Sprites 的技巧減少圖片存取數量,也可以使用 Data URI 將圖片編碼成字串後,直接嵌入在 HTML 或 CSS 檔案內容裡,作法如下:



  1. 首先將圖片以 base64 編碼成字串,以上圖為例,編碼後的字串為:

    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
    AAAASUVORK5CYII=

  2. 嵌入圖片時,語法修改為<img src="data:image/png;base64,你的base64字串" width="" height="">,要注意 bas64 字串不能有斷行,必須要接起來,效果如下圖所示:(IE 使用者若看不到,請升級至 IE9 以上,並確定沒有按到相容模式


  3. 如果是用在 CSS 檔案裡,原本若寫成 background-image: url(/path/to/image.png),則可以修改成 background-image: url(data:image/png;base64,圖片的base64字串)

  4. 當然這個方法也可以用在 gif, jpg 等 web 上可以使用的檔案,記得將 image/png 這個 MIME-type 改成對應的


不過 Data URI 不一定在每個圖片的顯示都適用,而且太過度地使用也可能會造成 HTML 檔案或是 CSS 檔案的肥大(如果 html, css 檔案也有作快取那就還好),總之就看網站設計者如何巧妙地運用 Data URI 的方式來呈現資料,以減輕 browser 發送網路存取的負擔囉。


註: Base64 編碼器可以在網路上搜尋 base64 encoder 就有很多資源了


番外篇


如果使用了 Data URI,那還可以將圖片 cache 在用戶端的 localStorage 裡面,像是這樣:


<img src="" id="the-img">
<script src="jquery.min.js"></script>
<!-- See: http://www.webtoolkit.info/javascript-base64.html -->
<script src="base64.js"></script>
<script>
if (!localStorage.theImg) {
  $.get('/path/to/img.png', function(data) {
    var img = Base64.encode(data);
    localStorage.theImg = 'data:image/png;base64,' + img;
    $('#the-img').attr('src', localStorage.theImg);
  });
} else {
  $('#the-img').attr('src', localStorage.theImg);
}
</script>


 

歷史上的今天