前端图片优化（三）：css sprite精灵图

博客链接

一、sprite精灵图是什么

在网页开发过程中，在网页中经常会用到一些小图标，虽然是小图标但是每个小图标都会发起一个http请求。如果整个网站使用很多这种小图标，那就会产生很多http请求。这个无疑会增加网站的负担，降低网站的性能。CSS sprite技术的出现解决了这个问题，通过将很多个这种小图标融合到一张大的图片中，再通过css的background-image,background- repeat,background-position的组合进行背景定位，达到和之前http请求多张小图标一样的效果。极大的提高了网站性能。

二、使用场景

就像上面说的，sprite精灵图是整合多个小图标，对于尺寸较大的图片不推荐使用。本身尺寸较大的图片整合到一起后会使生成的图片非常大，会造成图片加载时间变长，影响性能。

三、优缺点

优点

减少http请求，提高网站性能。

缺点

1. 需使用ps等工具制作大图。
2. 额外的css样式，增加了开发工作量。
3. 对于合成的大图标在使用css布局时需精确定位到每个小图标的位置，会比较繁琐。
4. 当后期如果有小图标变更或者新增需要重新生成大图片，css式样可能需要重新调整。

以上的这些缺点可以通过工具解决。精灵图在线制作工具。我们只需将所需使用的小图标进行上传，工具会自动生成一个适当的大图标，同时会生成相应图标的使用css，简单方便。

四、使用案例

1. 通过上面说的工具上传所需使用小图标，生成大图片和css样式。
   

2. 在代码中使用

HTML

<div class="sprite-wrap">
    <div class="sprite-item bg-check"></div>
    <div class="sprite-item bg-close"></div>
    <div class="sprite-item bg-doubt1"></div>
    <div class="sprite-item bg-rightIcon"></div>
    <div class="sprite-item bg-warning "></div>
</div>

CSS

.sprite-wrap {
    padding: 30px;
}

.sprite-item {
    display: inline-block;
    background-color: #1DB2FA;
}

.bg-check {
    width: 28px;
    height: 28px;
    background: url('http://pvyg3g9ei.bkt.clouddn.com/css_sprites.png') -10px -64px;
}

.bg-close {
    width: 30px;
    height: 30px;
    background: url('http://pvyg3g9ei.bkt.clouddn.com/css_sprites.png') -64px -10px;
}

.bg-doubt1 {
    width: 34px;
    height: 34px;
    background: url('http://pvyg3g9ei.bkt.clouddn.com/css_sprites.png') -10px -10px;
}

.bg-rightIcon {
    width: 12px;
    height: 18px;
    background: url('http://pvyg3g9ei.bkt.clouddn.com/css_sprites.png') -114px -10px;
}

.bg-warning {
    width: 27px;
    height: 27px;
    background: url('http://pvyg3g9ei.bkt.clouddn.com/css_sprites.png') -58px -64px;
}

3. 实现效果
   
   演示demo

五、总结

css sprite的核心思想还是减少http请求数量，在网站优化方面很多优化方案都是围绕这一思想实现的。同时对于网站小图标的优化不仅有精灵图的方案，还有字体图标，Base64等方案，这些方案会在以后的博客中介绍，有兴趣的小伙伴可以留意。