css sprite 及图片优化那些事

CSS图片优化就是尽量压缩图片的大小，加快页面加载速度，这对于大型网站是很有用的。不要小看它，它可以大大提高网页加载速度。通常大家用到的方法就是css sprites。

CSS Sprites(图片整合技术) 的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度。想必很多人已经在用这个技术，我给大家简单介绍一下，总结一下我使用css sprite时的一些技巧。

CSS Sprites实现方法：

首先将小图片整合到一张大的图片上，然后根据具体图标在大图上的位置，给背景定位。

CSS Sprites技术要点总结：

1. 小图片整合时，按照从上到下的顺序，而不要一个图片挨着一个图片从左到右排列。这样排列background-position的值一目了然，写css时方便许多。同时也是为了后期维护着想。想象一下，如果后期维护时，改动其中某个图片的尺寸，那么周围的所有元素的background-position就会随之改变，这将会是一件很头疼的事情。

2. 小图片整合时尽量靠最左边或者最右边。这两个位置很灵活，非常适合摆放文本前的icon，再写样式时不会受到其它CSS Sprites图片干预。综合第1点，我们可以沿着最左边和最右边的两侧开始由上至下整合图片。

3. 不建议在不同小图片上下留间隔。因为这样会导致图片size增大从而增加文件的大小。这些间隔是没有必要存在的。

4. 把图片中颜色较近或相同的组合在一起可以降低颜色数，因为少色数的图片文件体积会相对的小。

图片优化：

当我们把所有小图片都整合到一张大图中后，就要开始考虑图片优化的问题。你可以看一下现在图片的文件大小。是不是有些不尽人意呢，没关系，下面的步骤可以解决它。

因为一般整合出的大图背景基本上都是全透明的，所以我们会存为png格式。大家可能会说gif比png文件大小要小，我们不是要优化吗，为什么不是gif？因为gif图片在处理圆角等曲线、或斜线的地方会出现很多锯齿，这是我们不希望看到的。而且可能会丢失一些接近于白色的小图片像素。况且我们还能找到比gif更小尺寸的格式，那就是我今天要介绍的PNG8格式。

对于非动画的GIF更建议都使用PNG8因为它能做到跟原png图片一样的效果，而且能为你节省10%-30%的文件大小，甚至比gif图片还节省。

如何将图片转成png8格式

1. 图片准备：无论你是用什么绘图软件绘的图，只要按常规操作保存为png格式就可以了。photoshop中没有转png8的操作，所以我们需要求助于fireworks。

2. 在fireworks中打开整合好的大图。

3. 选择 文件—图像预览。

4.在“格式”下拉框中选择PNG8，其他什么都不用选，直接点击“导出”按钮选择路径就可以了。

很简单吧~赶快看看你的png8图片的大小吧，和之前的图片对比一下。你会有惊喜的！~~在看看图片质量，简直是perfect~~

转载自：w3cfuns