前端图片最优化的引入方式分析

前端图片引入方式分析

众所周知，页面内图片的引入方式一般有这3种：雪碧图，base64内联，普通单图。（canvas,svg等非常规方式不在此次议题里），先简单分析一下三种方式的优劣势：    

  

嗯，大概的情况是这样的，然后我来稍微扩展解释一下：

1. base64图本身确实无法缓存，但是base64图一般是存在于css里的，那么就可以随着css被缓存而实现间接缓存，所以它的缓存属性不是“无”。说它“差”是因为并不是直接被当做图片缓存。当然如果是直接写在html里的，那就没法缓存了，这个要注意。
2. base64额外增加html/css大小并不是主要问题，问题是，因此造成的渲染堵塞有时候是致命的！而作为图片文件加载则不存在这个问题，因为图片是不会堵塞到html和css加载的，因此也不会影响首屏渲染。（当然了，你非要把img标签写在style前面那我只能说，哥，我服~~~~）

了解了三种方式的优劣势之后，对于使用场景简单归纳一下：

1. 页面自身独有的图片，全部合并成一张雪碧图。
2. 公共模块或者公共组件，如果包含多张图片，则各自为阵合并各自的雪碧图；如果只有一两个图片，或者包含有可以被其他模块、组件、页面复用的图片，则使用灵活性好的单图模式或base64模式。

不过这种说法遗留了一个问题：例如所有页面都有的吊顶区域，假如那里有一个小图，注意，是一个喔（如果是很多的话就合并啦），这种时候是直接单图引入呢？还是base64内嵌到吊顶的css里？

别急！

下面我们再对base64模式做一个简单的分析：

先明确我们对于base64图片劣势的控诉点在于，1：丫会增大原始图片文件；2：植入css之后会增大css文件大小。

做一个简单的实验，我把几个全局经常出现的小图标，用base64编码，结果：平均增大35%
但是！gzip压缩后 —— 4%~40%，平均增大22%

下面简单归纳一下不同场景所应该使用的图片引入方式：（正经脸 -_- !!!）

1、全局通用的，非特定页面或模块独有的图片，采用单图或base64方式引入，二者区别如下：
1.1 若该图片在多处使用或图片本身较大（这类图总体积大于20kb），则使用单图模式
1.2 若该图片只有少数地方使用且图片本身较小（这类图总体积小于20kb），则使用base64模式
2、公共模块/组件里的图片（假设该模块名为mod-prd）
模块内有N(N>=3)个图片，则全部放入slice/mod/prd里，使用雪碧图模式，否则参考全局通用图片处理方式
3、页面自身独有的图片，全部合并成一张雪碧图