网页图片优化小技巧

本文属于《高性能web前端优化指南》系列文章。

在开始之前,您可以看看:网页中图片使用的一些忌讳

本文主要介绍一些优化网页图片的小技巧,力求简单,易操作。

1,photoshop保存的图片通常体积偏大。

这是因为photoshop更注重图片质量。我从网上下载了一张jpg图片,大小为11.5KB,用PS打开,不做任何改动直接另存,如果选最高质量的话,新图片体积为46.6KB,变成了原来的4倍!

通常我们做网站是用PS改图是很必要的,那怎么解决这个图片体积偏大的问题?

解决:用系统自带的画图工具或ACDSee等看图工具打开这张图片,另存一下,体积即可回复正常。

2,gif与png图片的区别

gif支持透明,png支持半透明。支持透明的意思是,要么不透明,要么透明;支持半透明则是,可以完全透明,也可以完全不透明,但还可以透明50%,可以透过这张图片看到图片下面的内容。

gif与png的另一个不同点是:IE6不支持PNG的半透明,默认会出现灰色背景,巨难看!

这是我最讨厌IE6的原因之一。

3,对零碎图标使用CSS Sprite技术

CSS Sprite技术的优点是减小图片体积,易于图标管理,减少http请求数量,而且代码很酷。详情可进入这里

 

4,不使用bmp图片

因为bmp图片体积巨大!不利于加载。

—————————-分割线——————–

暂时就这些,都是些基础知识,但对优化图片比较有用。

发表评论

电子邮件地址不会被公开。