BASE64编码的图片

在Web中还有一个比较常见的加解密方法，那就是Base64，准确来说，它其实是一种将任意二进制转化为文本字符串的编码方法。它并没有所谓的密钥。常用于在URL、Cookie、网页中传输少量二进制数据。

使用base64编码图片其实是基于 数据URL的方案。HTML4.01规范引用了数据URI方案，尽管多年来一直被忽视，但所有现代浏览器都实现了对数据URL的某种程度的支持。
数据URL的格式如下：

data:[<mediatype>][;base64],<data>

• <media type>是Internet媒体类型规范（带有可选参数）——即“text/plain；charset=utf-8”、“image/gif”、“application/octet stream”等。如果省略了<mediatype>，则默认为“text/plain；charset=us-ascii”。
• “；base64”字符串将数据标识为base64编码。
• 用逗号（，）与前一部分分隔的数据。数据由多个8位序列组成，称为八位字节，用字符表示。数据URI中允许的字符包括现代英语字母表中小写和大写字母的ASCII字符，以及阿拉伯数字。由任何其他字符表示的八位字节必须是URL编码的（也称为百分比编码），即，对于与号（&）而言，“%26”。base64中编码的数据URI可能包含人类可读性的空白。

应用场景

• Base64 在CSS中的使用

.demoImg{ background-image: url("data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...."); }

• Base64 在HTML中的使用

<img width="40" height="30" src="data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...." />

为什么要Base64编码图片

网页上的图片资源如果采用http形式的url的话都会额外发送一次请求，网页发送的http请求次数越多，会造成页面加载速度越慢。而采用Base64格式的编码，将图片转化为字符串后，图片文件会随着html元素一并加载，这样就可以减少http请求的次数，对于网页优化是一种比较好的手段。
对于极小或者极简单的图片，例如只有几像素的图片，不用考虑跨域问题也不想页面的图片缓存，请果断用base64。
最后附上一个工具网址: http://base64.top

参考：https://www.htmlgoodies.com/beyond/webmaster/serving-up-base64-encoded-custom-fonts.html