通过base64编码优化图片

通过base64编码优化图片

​ 在前端开发中，对于图片优化，有很多基本的方式，比如：图片压缩、图片合并（也就是“雪碧图”）、选择合适的图片格式（比如webp）、对图片进行缓存以及预加载等，base64编码图片也是其中的一种图片资源优化技巧。经过base64编码的图片会被转换为一个字符串url，我们可以将它保存在样式或脚本文件中和样式或脚本一起缓存下来，同时可以减少对应的http请求。

​ 但是并不是所有的图片资源都适合使用base64编码的方式来进行优化，原因是base64编码后的大小通常要比原图片要大（大概要大1/3），会造成样式或脚本文件的体积增大，浏览器加载时的进程阻塞，影响用户体验，同时，大体积的base64编码对编译速度也会有影响。所以base64编码优化图片其实对比较小的图标或是纯色背景是适用的。

​ 图片base64编码是通过webpack完成的，对应的加载器是url-loader ，示例代码如下：

# 路径：build/webpack.base.conf.js
# url-loader加载器定义
{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url',
    query: {
        limit: 10000,
        name: utils.assetsPath('img/[name].[ext]')
    }
}

其中limit 属性可以指定需要被base64编码的图片，单位为byte，此例中表示大小不大于10kb的图片将会被base64编码，并返回一个DataURL 。