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)