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

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

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

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

  1. 首先將圖片以 base64 編碼成字串,以上圖為例,編碼後的字串為:
    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
    AAAASUVORK5CYII=
  2. 嵌入圖片時,語法修改為,要注意 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 裡面,像是這樣:






  • Calos

    Image corrupt or truncated: data:image/jpg;base64, 會出現這樣的 error message 

    • 不知道您後面接的 base64 string 有沒有錯誤呢

    • 不知道您後面接的 base64 string 有沒有錯誤呢

  • 柏年 林

    將圖片變成字串,資訊量也會跟著變大2~n倍囉?這個方法可能比較適合一堆小圖的網頁,如果是放了大圖的網頁,可能犧牲request times比較划算?

  • Pingback: 以 HTML5 開發 Mobile Web App | Pearltrees()