使用CSS贴图合并图片
概览
使用CSS贴图合并图片，可以减少网络往返的数量和下载其他资源的延迟，可以减少请求的开销，并能降低一个网页下载的字节总数。
类似于JavaScript和CSS，下载多个图像产生额外的往返。一个包含许多图像的网站，可以将它们组合成更少的输出文件，以减少等待时间。
说明
在CSS里作为背景使用的GIF、JPG和PNG图片，可以合并为一张大的图片，然后这些单独的CSS背景，改写为指向一张大的图片，利用背景定位，使页面看起来像从前那样，这个过程被称为CSS Spriting（CSS贴图）。
好处
CSS贴图对网页速度有几个好处。
- 首先，如果许多小图像被组合成一个大的图像时，浏览器将需要更少的服务器连接，这可以增加并行性。
- 第二，从每个单独的请求开销中节省字节（包括HTTP标头和图像头）；依靠这张大PNG图片的压缩程度，可以显著的节省带宽。
- 最后，在一些浏览器解码一个大图像比解码几个小图像更快。
范例
使用CSS贴图合并图片之前，HTML里是这样写
<html>
<head>
<title>Sprite Images</title>
<style type="text/css">
#bg_Cuppa {
background-image:url('images/1.png');
background-repeat:no-repeat;
width:65px;
height:70px;
}
#bg_BikeCrashIcn {
width:100px;
height:100px;
background:transparent url('images/2.png') 0 0 no-repeat
}
<style type="text/css">
</head>
<body>
<div id="bg_Cuppa"></div>
<div id="bg_BikeCrashIcn"></div>
</body>
</html>
使用CSS贴图合并图片之后，CSS是这样写
#bg_Cuppa{
background-image:url(images/1-2.png);
background-repeat:no-repeat;
width:65px;
height:70px;
background-position:0px 0px
}
#bg_BikeCrashIcn{
width:100px;
height:100px;
background:transparent url(images/1-2.png) 0px -70px no-repeat;
}建议
一起加载的图片使用CSS贴图
合并在同一张网页里总是一起加载的图片，例如，在每一张网页里都加载的一组图标就应该使用CSS贴图。而那些每次浏览都改变的动态图片，比如资料照片或其他那些频繁改变的图片，则不应该使用CSS贴图。
GIF和PNG图片要CSS贴图
GIF和PNG图片使用无损压缩，因此可以使用CSS贴图而不会降低质量。
小图片要CSS贴图
每次请求都要一定的请求开销，一个浏览器下载小图片所需的时间由请求的开销决定，你可以使用一整张贴图一个请求而不是每张图片一个请求来减少开销。
缓存图片使用CSS贴图
长缓存周期的贴图图片意味着这张图片一旦被浏览器缓存将不需要往返请求。
最小化贴图图片的空白空间
为了显示一张图片，浏览器必须解压和解码这张图片。解码图像的大小是与图片的像素成比例的。因此，虽然sprited图像空的空间可能不会显著影响图像文件的大小，但未显示的像素的sprite却会增加你的网页的内存使用，这可能会导致浏览器变得不那么敏感。
使用类似调色板生成贴图图像
制作贴图图片时使用超过256色会导致生成的贴图使用PNG真彩类型而不是调色板类型，这将增加贴图的体积大小。为了生成更加的贴图，请使用相同的256色调色板合并图像。如果你的图像颜色有一定的灵活性，考虑减少所产生的贴图调色板为256色。
本页面中的内容已获得知识共享署名3.0许可，并且代码示例已获得Apache 2.0许可；另有说明的情况除外。
文章源地址：https://developers.google.com/speed/pagespeed/module/filter-image-sprite