CSS Sprites

问题的提出

网页中通常会包含大量小尺寸的图标、背景、装饰性图片等，由于http1.1协议的局限，这通常会给WEB服务器带来并发性问题和流量负担

• 每个图片都包含有图片头等元信息，如拍摄时间、地点等无用信息
• 每个图片都占用一个http连接，都需要重复的http头信息
• http1.1协议默认支持的并发连接数量有限
  • http2.0中已无此限制

可以通过浏览器的开发者工具的network面板,查看当前网页的http连接数

简单的打个比方,就相当于你在网上买了一台电脑,商家不是把一台整机用一个快递发给你,而是拆分成 N 个邮包多次快递给你,显然后一种方式成本高,速度慢。

解决方案: css sprites

假设在网页中需要在四个分开的位置分别显示如下四张图片

注意这是四张独立的图片，意味着四个<img>元素和四个http请求链接

为了节约网络流量，先将上述四张图片合成为一张图片。然后在显示时，通过CSS的背景定位指令，分别仅仅显示这张图片的某一部分(四分之一部分)

css sprites 示例

CSS Sprites 及工具

以上这种技术就称之为: css sprites，直译为CSS精灵或雪碧图。通常被解释为“CSS图像拼合”或“CSS贴图定位”

使用sprites技术需要拼接图片、计算显示座标和编写css代码，比较麻烦，下面的工具可以简化这些工作

• http://csssprites.com/
• http://spriteme.org/
• http://spritepad.wearekiss.com/
• more http://www.cnblogs.com/joyho/articles/3715260.html

注意：部分工具只能接受和处理 jpg/png 图片类型

参考

• http://www.runoob.com/css/css-image-sprites.html
• http://www.cnblogs.com/xiayi/p/5296152.html
• http://blog.163.com/zhangmihuo_2007/blog/static/270110752015011391211/
• https://css-tricks.com/css-sprites/

深入阅读

• 实现动画1 http://www.shejidaren.com/css-sprite-animation.html
• 实现动画2 http://www.softwhy.com/article-7147-1.html