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

 

CSS Sprite 在线合并工具

CSS Sprites Generator

 

CSS Sprite 应用实例

合并后的图片

 

米扑博客: https://blog.mimvp.com

 

 

 

参考推荐

css sprite 最佳实践