data:image/png;base64的使用：减少HTTP请求数

如下代码：

#download-button:before {
  -webkit-margin-end: 4px;
  background: -webkit-image-set(
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAAAO0lEQVQ4y2NgGArgPxIY1YChsOE/LtBAmpYG0mxpIOSDBpKUo2lpIDZxNJCkHKqlYZAla3RAHQ1DFgAARRroHyLNTwwAAAAASUVORK5CYII=) 1x,
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAAAZElEQVRYw+3Ruw3AMAwDUY3OzZUmRRD4E9iim9wNwAdbEURHyk4AAAAATiCVK8lLyPsKeT9K3lsownnunfkPxO78hKiYHxBV8x2icr5BVM+/CMf8g3DN34Rzns6ViwHUAUQ/6wIAd5Km7l6c8AAAAABJRU5ErkJggg==) 2x)
 no-repeat;
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
}

百度了一下才知道：这是在RFC2397中定义的Data URI scheme，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入，好处（摘自网络）：

优点：

减少HTTP请求数，没有了TCP连接消耗和同一域名下浏览器的并发数限制。

对于小文件会降低带宽。虽然编码后数据量会增加，但是却减少了http头，当http头的数据量大于文件编码的增量，那么就会降低带宽。

对于HTTPS站点，HTTPS和HTTP混用会有安全提示，而HTTPS相对于HTTP来讲开销要大更多，所以Data URI在这方面的优势更明显。

可以把整个多媒体页面保存为一个文件。

缺点：

无法被重复利用，同一个文档应用多次同一个内容，则需要重复多次，数据量大量增加，增加了下载时间。

无法被独自缓存，所以其包含文档重新加载时，它也要重新加载。

客户端需要重新解码和显示，增加了点消耗。

不支持数据压缩，base64编码会增加1/3大小，而urlencode后数据量会增加更多。

不利于安全软件的过滤，同时也存在一定的安全隐患。

————————————————

Data URI和MHTML两者的配合可以完整的解决所有的主流浏览器，它们由于无法被缓存和重复利用的缺陷，所以并不适合直接在页面中使用，但在CSS和JavaScript文件中对图片适当地使用有非常大的优越性：大大减少请求数，现在大型网站的CSS引用了大量的图片资源。CSS和JavaScript都可以被缓存，间接的实现了数据的缓存。利用CSS可以解决Data URI的重复利用问题。

告别CSS Sprites，CSS Sprites的出现是为了减少请求数，但它除了带来在不确定情况下的异常外，CSSSprites还需要人为的图片合并，即使有合并工具也依旧必须人为地在如何有效的拼图上耗费大量的时间，并带来维护的困难。当你遵循一定的设计原则后， 你就可以完全抛弃CSS Sprites来编写CSS，最后使用工具在上传到服务器环节把图片转换成Data URI和MHTML，如《利用data-uri合并样式表和图片》中用python实现的工具，这可以节约大量的时间。

base64编码把图片文件增加了1/3，Data URI和MHTML同时使用相当于增加了2/3，但CSS和JavaScript可以使用gzip压缩，其可以节省2/3的数据量，所以使用gzip压缩后的最终数据量是(1 + 1/3) 2 (1/3) = 8/9，所以最终流量是减少的。

它把一些 8-bit 数据翻译成标准 ASCII 字符，网上有很多免费的base64 编码和解码的工具。

在网页上显示出来的标准方法是：

其实“data:image/gif;base64,R0lGODlhJ……” 就是一张图片的DataURL，就是利用base64编码把图片数据翻译成标准ASCII字符。

等同于：

换句话说我们把图像文件的内容内置在 HTML 文件中，节省了一个 HTTP 请求。

2、在 CSS 中使用：

body { background-image: url(“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC”);}

3、如何查看对应的图片：

把 data:image/png;base64包括之后的字符串复制到浏览器地址栏中打开就可以显示对应的图片了。

4、Data URI scheme语法：

data:image/jpg; 声明数据协议及类型名称
base64,编码形式为base64
/9j/4AAQSkZ…… base64编码结果

5、Data URI scheme支持的类型有：

data:,<文本数据>data:text/plain,<文本数据>data:text/html,data:text/html;base64,data:text/plain;charset=UTF-8;base64,data:text/css,data:text/css;base64,data:text/javascript,data:text/javascript;base64,data:image/gif;base64,data:image/png;base64,data:image/jpeg;base64,data:image/x-icon;base64, 

6、在线文件转 Base64

支持 PNG、GIF、JPG、SVG、PSD、BMP、ICO、TTF、WOFF、EOT 等格式

地址：https://www.css-js.com/tools/base64.html