[html] 第128天 精灵图和base64如何选择呢？

[haizhilin2013]

第128天 精灵图和base64如何选择呢？
#55 #1038

[kiroInn]

精灵图

优点

• 将多个图像加载请求合并为一个请求

弊端

• 难以维护和更新
• 增加内存消耗

base64

优点

• 将多个图像加载请求合并为一个CSS文件请求
• 轻松更新生成文件

弊端

• base64编码比原始二进制表示大约大25%
• IE6或IE7不支持

[weilaiqishi]

可参考https://www.cnblogs.com/wangqi2019/p/10498627.html
Css Sprites（雪碧图或css精灵），是网页图片处理的一种方式，它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
原理：
将许多的小图片整合到一张大图片中，利用css中的background-image属性，background-position属性定位某个图片位置，来达到在大图片中引用某个部位的小图片的效果。
优点：
减少网页的http请求，提升网页加载速度。
合并多张小图片成大图，能减少字节总数（大图大小<=多张小图大小）.
缺点：
前期需要处理图片将小图合并，多些许工程量。
对于需要经常改变的图片维护起来麻烦。

base64：
介绍：
base64是网络上最常见的用于传输8Bit字节代码的编码方式之一，要求把每三个8Bit的字节转换为四个6Bit的字节，Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一。
通俗点讲：将资源原本二进制形式转成以64个字符基本单位，所组成的一串字符串。
比如一张图片转成base64编码后就像这样，图片直接以base64形式嵌入文件中
生成base64编码：
图片生成base64可以用一些工具，如在线工具，但在项目中这样一个图片这样生成是挺繁琐。
特别说下，webpack中的url-loader可以完成这个工作，可以对限制大小的图片进行base64的转换，非常方便。

优点：
base64的图片会随着html或者css一起下载到浏览器,减少了请求.
可避免跨域问题
缺点：
老东西（低版本）的IE浏览器不兼容。
体积会比原来的图片大一点。
css中过多使用base64图片会使得css过大，不利于css的加载。
适用场景：
应用于小的图片几k的，太大的图片会转换后的大小太大，得不偿失。
用于一些css sprites不利处理的小图片，如一些可以通过background-repeat平铺来做成背景的图片

按我来说还是雪碧图见得比较多，如王者荣耀官网英雄联盟官网

http://game.gtimg.cn/images/lol/v3/topfoot-spr.png
http://game.gtimg.cn/images/yxzj/m/m201706/images/bg/index.png

[yihai8721]

通常使用雪碧图，图片的合并可使用gulp-spriter处理，生成合并后的大图和css代码.