Data Url简介（base64图片编码）

Data Url简介（base64图片编码）

1. Data Url简介
   Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法。跟传统的用img标记将服务器上的图片引用到页面中的方式不一样，在Data URL协议中，图片被转换成base64编码的字符串形式，并存储在URL中，冠以mime-type。本文中，我将介绍如何巧妙的使用Data URL优化网站加载速度和执行效率。

2. Data URL基本原理
   图片在网页中的使用方法通常是下面这种利用img标记的形式：

   <img src="images/myimg.gif ">  
   

   这种方式中，img标记的src属性指定了一个远程服务器上的资源。当网页加载到浏览器中 时，浏览器会针对每个外部资源都向服务器发送一次拉取资源请求，占用网络资源。大多数的浏览器都有一个并发请求数不能超过4个的限制。这意味着，如果一个 网页里嵌入了过多的外部资源，这些请求会导致整个页面的加载延迟。而使用Data URL技术，图片数据以base64字符串格式嵌入到了页面中，与HTML成为一体，它的形式如下：
   
   从上面的base64字符串中你看不出任何跟图片相关的东西，但下面，我们将传统的img写法和现在的Data URL用法左右对比显示，你就能看出它们是完全一样的效果。但实际上它们是不一样的，它们一个是引用了外部资源，一个是使用了Data URL。

3. 浏览器支持情况
   几乎所有的现代浏览器都支持Data URL格式，包括火狐浏览器，谷歌浏览器，Safari浏览器，opera浏览器。IE8也支持，但有部分限制，IE9完全支持。

4. Data Url优势
   减少链接数，图片转为Base64编码，以减少图片的链接数，从而减少http请求次数。

5. Data Url劣势

• Base64编码的数据体积通常是原数据的体积4/3，也就是Data URL形式的图片会比二进制格式的图片体积大1/3（数据体积增大）
• Data URL形式的图片不会被浏览器缓存，这意味着每次访问这样页面时都被下载一次。这是一个使用效率方面的问题——尤其当这个图片被整个网站大量使用的时候。（不会被缓存，可以把图片处理成背景background,利用浏览器的css样式的缓存）

6. 总结以及疑问
   说到Data URI的优点，自然少不了“减少链接数”，把图片转为Base64编码，以减少图片的链接数。我们先想当然一下，同样一张图片，如果不用发起一个下载请求，打开速度是会更快的。但是，有几个问题需要关注下：
   • 图片始终是要下载的，那么下载一张图片的速度快还是下载一堆编码快？
   • 浏览器对图片的显示，处理效率哪个更快？
   • 图片的缓存问题

原文链接 http://www.xuechenlei.com/2016/10/data-url-introduction-advantages-disadvantages/