base64编码图片

base64:是一种基于64个可打印字符来表示二进制数据的表示方法。常用于在通常处理文本数据的场合，表示、传输、存储一些二进制数据，包括MIME的电子邮件及XML的一些复杂数据。

可打印字符：在显示器上输出且能够看见。ASCII 32~128。

上文64个可打印字符特指：A-Z、a-z、0-9，其余两个可打印字符（不同系统不同的字符）。

 

应用例子：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/　LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D"/>

【Data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入，减少http请求。但是浏览器不会缓存这种数据。】

data URI 的格式： data:[<mediatype>][;base64],<data>

【Data URI中，data表示取得数据的协定名称，image/png 是数据类型名称，base64 是数据的编码方法，逗号后面就是这个image/png文件base64编码后的数据。】

 

与webpack的关联：

url-loader: Loads files as base64 encoded URL。

用法：url-loader 功能类似于 file-loader，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。

{
  loader: 'url-loader',
  options: {
    limit: 8192 //小于这个字节数就会用base64的方式编码数据，然后嵌入到网页中。
  }
}
link: https://www.webpackjs.com/loaders/url-loader/

优缺点：（摘自掘金文章）

1. Base64会让样式文件变得很大，从而阻塞关键下载和渲染。
2. 样式文件增加的体积无法通过Gzip很好地压缩。
3. 在缓存方面，本可以分别设置缓存策略的图片和样式表也混在一起，无法区别更新。
4. 在浏览器渲染方面，也增加了解析CSS树的耗时。
5. 在CSS文件中过多使用Base64时，会让首次渲染时间（First Paint）增加2倍以上，在移动端，由于网络和手机性能的缘故，这一时间可能会增加10倍以上。

link：https://juejin.im/entry/58ca2b9dac502e0058868693