CSS Sprite 网页优化

技术写在博客里，理论记载心中！

      很早听过一种网页图片优化的方式，将一些小的图片合并成大的图片，这样，只需请求服务器一次能加载所有所需的背景，被称为CSS Sprite 技术。今天，第一次用CSS Sprite技术来优化图片加载。总结下思路。

      百度了下CSS Sprite,可以使用的工具还是挺多的。我用的是在线工具:http://spritegen.website-performance.org/，具有忽略重复图像，调整图像精度，确定横向和纵向偏移，指定背景色和透明度，指定CSS前缀等众多功能。最重要可以选择网站的语言，设置为中文，用起来很方便。直接将图片打包为.zip格式，上传后。下载合并好的图片。复制网站自动生成的CSS代码。这样自己用的时候很方便，基本替换下类名称就可以了。

      一个在线检测网页加载速度，并提供优化建议的网站：https://developers.google.com/speed/pagespeed/insights，比较方便，直接在输入你的网站地址，并点击analyze分析。

     CSS-SPRITE，虽然减少了图片的请求，但维护、使用起来都更加困难。

以下转载两篇文章：一篇关于CSS-SPRITE的简介：http://blog.sina.com.cn/s/blog_8b6b9f700100tw6y.html，一篇提供了CSS-SPRITE制作工具及使用：http://www.iwms.net/n2139c40p6.aspx