图片转换成 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