Data URL给了咱们一种很巧妙的将图片“嵌入”到HTML中的方法。跟传统的用img
标记将服务器上的图片引用到页面中的方式不同,在Data URL协议中,图片被转换成base64编码的字符串形式,并存储在URL中,冠以mime-type。本文中,我将介绍如何巧妙的使用Data URL优化网站加载速度和执行效率。php
1. Data URL基本原理
图片在网页中的使用方法一般是下面这种利用img
标记的形式:css
- <img src="images/myimage.gif ">
这种方式中,img
标记的src
属性指定了一个远程服务器上的资源。当网页加载到浏览器中 时,浏览器会针对每一个外部资源都向服务器发送一次拉取资源请求,占用网络资源。大多数的浏览器都有一个并发请求数不能超过4个的限制。这意味着,若是一个 网页里嵌入了过多的外部资源,这些请求会致使整个页面的加载延迟。而使用Data URL技术,图片数据以base64字符串格式嵌入到了页面中,与HTML成为一体,它的形式以下:html
- <img src="data:image/gif;base64,R0lGODlhMwAxAIAAAAAAAP///
- yH5BAAAAAAALAAAAAAzADEAAAK8jI+pBr0PowytzotTtbm/DTqQ6C3hGX
- ElcraA9jIr66ozVpM3nseUvYP1UEHF0FUUHkNJxhLZfEJNvol06tzwrgd
- LbXsFZYmSMPnHLB+zNJFbq15+SOf50+6rG7lKOjwV1ibGdhHYRVYVJ9Wn
- k2HWtLdIWMSH9lfyODZoZTb4xdnpxQSEF9oyOWIqp6gaI9pI1Qo7BijbF
- ZkoaAtEeiiLeKn72xM7vMZofJy8zJys2UxsCT3kO229LH1tXAAAOw==">
从上面的base64字符串中你看不出任何跟图片相关的东西,但下面,咱们将传统的img
写法和如今的Data URL用法左右对比显示,你就能看出它们是彻底同样的效果。但实际上它们是不同的,它们一个是引用了外部资源,一个是使用了Data URL。git

几乎全部的现代浏览器都支持Data URL格式,包括火狐浏览器,谷歌浏览器,Safari浏览器,opera浏览器。IE8也支持,但有部分限制,IE9彻底支持。程序员
2. 为何Data URL是个好东西
Data URL能用在不少场合,跟传统的外部资源引用方式相比,它有以下独到的用处:github
- 当访问外部资源很麻烦或受限时
- 当图片是在服务器端用程序动态生成,每一个访问用户显示的都不一样时。
- 当图片的体积过小,占用一个HTTP会话不是很值得时。
Data URL也有一些不适用的场合web
- Base64编码的数据体积一般是原数据的体积4/3,也就是Data URL形式的图片会比二进制格式的图片体积大1/3。
- Data URL形式的图片不会被浏览器缓存,这意味着每次访问这样页面时都被下载一次。这是一个使用效率方面的问题——尤为当这个图片被整个网站大量使用的时候。
然而,Data URL这些不利的地方彻底能够避免或转化。本文的重点就是要讨论这个问题。浏览器
3. 在CSS里使用Data URL
当第一次看到Data URL的做用和用法时,你也许会很不疑惑,“为何要麻烦的将图片转换成base64编码字符串,还要嵌入的网页中,将HTML代码弄的混乱不堪,甚至还会有性能上的问题。”缓存
诚然,没法否定缓存在浏览器性能中的重要做用——如何能将Data URL数据也放入浏览器缓存中呢?答案是:经过CSS样式文件。CSS中的url
操做符是用来指定网页元素的背景图片的,而浏览器并不在乎URL里写的是什么——只要能经过它获取须要的数据。因此,咱们就有了能够将Data URL形式的图片存储在CSS样式表中的可能。而全部浏览器都会积极的缓存CSS文件来提升页面加载效率。服务器
假设咱们的页面里有一个很小的div
元素,咱们想用一种灰色的斜纹图案作它的背景,这种背景在当今的网站设计者中很是流行。传统的方法是制做一个3×3像素的图片,保存成GIF或PNG格式,而后在CSS的background-image
属性中引用它的地址。而Data URL则是一种更高效的替代方法,就像下面这样。
下面是CSS代码:
- .striped_box
- {
- width: 100px;
- height: 100px;
- background-image: url("data:image/gif;base64,R0lGODlhAwADAIAAAP///8zMzCH5BAAAAAAALAAAAAADAAMAAAIEBHIJBQA7");
- border: 1px solid gray;
- padding: 10px;
- }
在咱们的HTML里放入下面的代码:
- <div class="striped_box lazy ">
- 这是一个有条纹的方块
- </div>
实际输出效果就是下面这样
在这个例子中,Data URL的使用是彻底符合场景的。它避免了让这个小小的背景图片独自产生一次HTTP请求,并且,这个小图片还能同CSS文件一块儿被浏览器缓存起来,重复使 用,不会每次使用时都加载一次。只要这个图片不是很大,并且不是在CSS文件里反复使用,就能够以Data URL方法呈现图片下降页面的加载时间,改善用户的浏览体验。
4. 将图片转换成Data URL格式的方法
用Data URL来展现图片的例子以及它的好处咱们说完了,下面咱们转入下一个问题,如何将图片转换成Base64编码的字符串。其实网上有不少工具均可以使用,下面列举了几个。其中一个是在线工具,一个Mac OS X桌面应用。
Data URL总结
IE6/7是不支持Data URL技术的,不幸的是在中国还有不少用户在使用这种古老的浏览器。但愿各方面包括官方和民间都多作努力工做,让现代浏览器(谷歌浏览器,火狐浏览器,IE11+)尽快的占领市场,这是咱们Web程序员最大的愿望。