优化网站设计（三十）：优化CSS sprites

前言

网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议。这方面的研究一直没有停止过，我在不同的场合也分享过这样的话题。

作为通用的原则，雅虎的工程师团队曾经给出过35个最佳实践。这个列表请参考 Best Practices for Speeding Up Your Web Site  （http://developer.yahoo.com/performance/rules.html），同时，他们还发布了一个相应的测试工具Yslow http://developer.yahoo.com/yslow/

我强烈推荐所有的网站开发人员都应该学习这些最佳实践，并结合自己的实际项目情况进行应用。 接下来的一段时间，我将结合ASP.NET这个开发平台，针对这些原则，通过一个系列文章的形式，做些讲解和演绎，以帮助大家更好地理解这些原则，并且更好地使用他们。

准备工作

为了跟随我进行后续的学习，你需要准备如下的开发环境和工具

1. Google Chrome 或者firefox ，并且安装 Yslow 这个扩展组件.请注意，这个组件是雅虎提供的，但目前没有针对IE的版本。
   1. https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh
   2. https://addons.mozilla.org/en-US/firefox/addon/yslow/
   3. 你应该对这些浏览器的开发人员工具有所了解，你可以通过按下F12键调出这个工具。
2. Visaul Studio 2010 SP1 或更高版本，推荐使用Visual Studio 2012
   1. http://www.microsoft.com/visualstudio/eng/downloads
3. 你需要对ASP.NET的开发基本流程和核心技术有相当的了解，本系列文章很难对基础知识做普及。

本文要讨论的话题

这一篇我和大家讨论的是第三十条原则：Optimize CSS Sprites （优化CSS Sprites)。

CSS Sprite(由于很难做中文翻译，所以保留英文）是这样一种技术：

如果我们的多个页面元素需要使用不同的图片（例如作为背景）,常规的做法可以为每个元素定制一个CSS，每个CSS中通过background-image属性来设置不同的图片。这样做是可以实现功能的，但会带来的一个问题就是可能需要下载多个图片。为了改善这一点，CSS的设计者考虑了一种新的做法：可以将这些图片合并为一个大图片，然后在CSS中不仅仅设置background-image属性，同时还设置background-position属性来决定要显示的图片区域。这样一来，既实现同样的效果，又减少了图片下载的数量。

这个技术，在“优化网站设计（一）：减少请求数”这篇文章中，我已经提到过了。不过也要注意一下，这种技术可能会带来一些额外的工作或者麻烦：

1. 手工地合并这些图片，并要去测量相应的像素位置，是比较繁琐的。不过，现在可以通过一些工具来帮助简化工作。
• http://spritegen.website-performance.org/
•  http://csssprites.com/
2. 额外的维护工作。如果其中某个图片修改了，不光要生成新的图片，而且可能涉及到很多CSS的修改。
3. CSS Sprites一般只能使用到固定大小的盒子（box）里，这样才能够遮挡住不应该看到的部分。

本文提到的几个优化建议，主要如下

1. 尽可能地使用横向组合图片，这比纵向组合图片通常体积更小一些。
2. 尽量使图片具有接近的色系，这样最终组合出来的图片也会小一些。
3. 尽量使用小一些的图片，并且图片之间的间隙尽量也小一些，目的还是为了最终组合出来的图片体积更小。

【备注】就像上一篇文章提到的那样，我对图片并不特别在行，但这也有一个好处，我通常对于自己并不怎么在行的内容，都会毫不犹豫地选择遵从专业人士所提供的最佳实践和原则，例如上面提到的三条建议。