Data URL基本原理
Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法。跟传统的用img 标记将服务器上的图片引用到页面中的方式不一样,在Data URL协议中,图片被转换成base64编码的字符串形式,并存储在URL中,冠以mimetype。
图片在网页中的使用方法通常是下面这种利用img 标记的形式:
<img src="images/myimage.gif ">
这种方式中, img 标记的src 属性指定了一个远程服务器上的资源。当网页加载到浏览器中时,浏览器会针对每个外部资源都向服务器发送一次拉取资源请求,占用网络资源。大多数的浏览器都有一个并发请求数不能超过4个的限制。这意味着,如果一个网页里嵌入了过多的外部资源,这些请求会导致整个页面的加载延迟。而使用DataURL技术,图片数据以base64字符串格式嵌入到了页面中,与HTML成为一体,它的形式如下:
base64字符串中你看不出任何跟图片相关的东西,但下面,我们将传统的img 写法和现在的Data URL用法
左右对比显示,你就能看出它们是完全一样的效果。但实际上它们是不一样的,它们一个是引用了外部资源,一个
是使用了Data URL。
优缺点分析
1. 浏览器支持
几乎所有的现代浏览器都支持Data URL格式,包括火狐浏览器,谷歌浏览器,Safari浏览器,opera浏览器。
IE8也支持,但有部分限制,IE9完全支持。
2. 数据容量
Base64编码的数据体积是原数据的体积4/3,也就是DataURL形式的图片会比二进制格式的图片体积大1/3。
3. 使用场景
DataURL形式的数据不会占用HTTP会话,所以再访问外部资源或当图片是在服务器端用程序动态生成时借用DataURL是一个不错的选择