网站优化，人人有责，他不仅是前端的责任。从一开始的视觉，交互的设计时，我们就应该开始考虑网站的优化。下面我要说的有一个大前提：我们要非常注意网站的视觉表现，并不能妥协。但是也可以在设计和交互的时候，就开始考虑网站的优化。

现在网站的主要构成元素之一，也是最占开销的：图片，图片，还是图片。图片是视觉的重要元素。前端们为了节约服务器的开销。创造了css sprites的方法，如其名一样，他的确是一个神奇的方法。在web上常用的格式，有GIF,JPG，哦，还有PNG，yahoo的优化原则上也描述过 了：我们要尽可能的使用PNG来节约资源。同样的可以参考芸苓之前在联盟blog上和大家的分享。

PNG有2种，PNG 8 和PNG 24，可以类比成GIF 和高品质的JPG。但是比相同质量的GIF和JPG来说。要更小。一分小也就一分强大。PNG 8又比PNG 24更小。PNG 8中又有256和128等若干种选择，他的意思是，在当前选择下所包含的不同颜色信息的数量。 在测试之后得到：png似乎主要决定图像大小的是颜色的多少。如此可以知道，在做css sprites的时候，尽量选择类似色调的图片元素在一起，可以在同样大小的情况下获得更高的图片质量。所以在png中，通常所使用的平铺背景来节约图片 大小的开支，似乎变的并不重要了。在合理的状况下，好像并不能为你节约多少大小，相应的html和css大小也会增加。前端们要权衡

但：视觉的责任就来了。首先重复一下大前提：“我们要非常注意网站的视觉表现，并不能妥协。但是也可以在设计和交互的时候，就开始考虑网站的优化”。在做设计的时候，视觉们是否有优化的概念？视觉语言有很多种，我们可否少用对比色，少用渐变色？换一个表现形式来达成视觉表现的目的？我们和前端一起来减少图片大小，开始优化。这样前端们在实现的时候，css sprites可以更小更强大。我们是web设计，而且基石是我们是大众的，商业化的设计。代码需要复用，视觉风格也一样

来自：http://yy.mylovings.net/2008/04/14/9

延伸阅读：
高性能网页开发的14条军规
闲谈 Web 图片服务器
Yahoo!网站性能最佳体验的34条黄金守则之JavaScript和CSS
Yahoo!网站性能最佳体验的34条黄金守则之图片、Coockie与移动应用
Yahoo!网站性能最佳体验的34条黄金守则之服务器篇