为什么要使用雪碧图?

1. 雪碧图的起因

图标原来是怎样的就让它怎样好啦?为什么要多此一举把它们集合到一张图里去呢?

其实,这和网页的加载请求有关,一般来说一个网站里并不仅仅只有一两个小图标,假如某个网站的首页一共有十个小图标,那么加载这个网页的时候你的电脑就会发送十个请求。

每个请求回来的响应就是一张小图标图片。但是如果把这些小图标都放在一张大图里,那么就只需发送一个请求。

看到这里你会不会有一些疑惑:虽然十个请求变成了一个请求,但是图片大小也变成了十倍,这样的话还是没有实质性的改变啊。

其实浏览器同一时间加载的资源数是有限的,如果一次性加载十个图标,浏览器就不会在同一时间继续加载别的资源了,减少了页面的请求次数,也自然就提高了页面的加载速度。

2. 举个例子

举个生活中的案例来方便大家理解:

如果冰箱里有你想吃的十个蓝莓,你是会每次拿过来一个然后跑十次呢?还是会一次性把十个蓝莓都拿过来呢?

虽然说一次性拿十个看似拿的东西变多了,但因为蓝莓这种东西本来就又轻又小,所以一次拿十个比一次拿一个跑十趟划算多了。

而且我们大部分人用手机的时间都超过了用电脑的时间,在移动端依赖的是速度相对较慢的无线网络,甚至有可能是在电梯或者地铁这种信号不稳定的地方去访问网站。

在这种情况下将多张图片合并到一张图片后,只需一次网络请求就可以将所需的源资源全部下载,减小建立连接的消耗,这在移动端的优势尤为明显。

3. 雪碧图的优势

  • 减少网页的 http 请求。 利用雪碧图能够很好地减少网页的 http 请求,从而大大的提高页面的性能,这也是其最大的优点,也是其被广泛传播和应用的主要原因。

  • 减少图片的大小。 雪碧图能够减少图片的大小,3 张图片合并成 1 张图片的大小比这 3 张图片加起来的大小还要小。

  • 简化图片命名。 解决了在图片命名上的困扰,只需对一张雪碧图命名就可以了,不需要对每一个小元素进行命名,从而减少了掉头发的次数。

  • 方便更换主题。 只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便。

4. 小结

综上所述,我们已经了解了为什么要"多此一举"的把小图片都集合在大图片里。

不过外界有一些传言说随着 HTTP2 的到来,这种技术已经过时了。

那么这些传言是否为真呢?请看下一小节。