圖片轉換成 Data URI 格式

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

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

Data URI 轉換工具

Data URI 可以用來什麼呢

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

<img src="data: image/jpg;base64,wEAAAAAADYAAAAoAAAACAIAADkAAAABABgAAAAAAFhbAQAAAAAAAAAAAAAAAAAAAA" />
 
<img src="data: image/jpg;base64,wEAAAAAADYAAAAoAAAACAIAADkAAAABABgAAAAAAFhbAQAAAAAAAAAAAAAAAAAAAA" />

CSS Background

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

div {
   background: url("data: image/jpg;base64,wEAAAAAADYAAAAoAAAACAIAADkA");
}

Data-URI performance 分析

• https://plus.google.com/116237864387312784020/posts/S327kJKy6HG