2014
Jan
15

data URI 是一種將圖片轉換成 base64 encode 過的純文字,目前大部分先進的 Browser 已經支援這種格式,可以將格式轉換成正常圖片顯示。

下面是一個轉換工具,你可以輸入一個網路上的圖片,或是上傳一張電腦的圖片,接著程式就會自動幫你將圖片轉換成 data URI 的 格式。

Data URI 轉換工具

或是 上傳本機圖片:

執行結果 data URI 格式:

Data URI 可以用來什麼呢

Data URI 可以用來當圖片一樣顯示,取代一般 img 的 src value,一般的網頁圖片會使用 http request 去取得,但是使用 http request 會使用 Browser 發出一個 request ,而當你的網頁圖片越多,Http Request 就會越多,這樣很容易拖慢網頁的載入進度,那我們就能使用 Data URI 的方式,將圖片的 URL 轉換成 Data URI 的格式,一次將全部的圖片下載回來。

Data URI 網頁使用範例
  1. <img src="data: image/jpg;base64,wEAAAAAADYAAAAoAAAACAIAADkAAAABABgAAAAAAFhbAQAAAAAAAAAAAAAAAAAAAA" />
  2.  
  3. <img src="data: image/jpg;base64,wEAAAAAADYAAAAoAAAACAIAADkAAAABABgAAAAAAFhbAQAAAAAAAAAAAAAAAAAAAA" />

CSS Background

Data URI 還可以使用在 CSS style 裡面,平常使用 background: url("http://xxx.img") ,這種寫法也是會使 Browser 發出一個 Request ,所以用一樣的方式,透過 Data URI 將圖片轉成文字寫入到 background 中。

Data URI Background 使用範例
  1. div {
  2. background: url("data: image/jpg;base64,wEAAAAAADYAAAAoAAAACAIAADkA");
  3. }

Data-URI performance 分析


回應 (Leave a comment)