网页中图片使用的一些忌讳

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

先放一张美女图,与主题无关:

网络红人美女王希维时尚写真图片→唯美图片[NHACK.COM]

色彩斑斓的图片,与文字相比有很多优势:更直观,更美观,更形象,而且可以简单的表达出需要一大段文字才能说清楚的事情。所以不管是在网页上,还是在生活中,图片的使用都很广。

现在的网速,对于网页图片加载应该是可以胜任了。只是对图片进行优化还是很必要的,不能因为有网速就尽量拖网速。本文简单说一下网页图片使用的一下忌讳。

1,不要使用.bmp图片

.bmp图片的优点在于图像质量高,但他有明显缺点:图片体积过大,缺点甚至完全抵消了它的优点。一张内容相同的.bmp图片与.jpg图片相比,体积可能大10倍以上!但图片质量的差距却很不明显,至少肉眼看不出来。

不信的同学,可以把你电脑上的一张.jpg另存为.bmp,两者对比一下,你就懂了。

2,少用动态.gif图片

.gif图片是个好东西,它的静态图片体积小,而且支持透明;它还能制作动态图片,可以不借用任何插件就实现动画。但,动态gif图片体积很大

动态gif图片之所以动,是因为它是很多张静态图片一张一张“播放”出来的,所以它的体积实际上是10几或几十张静态图片加起来那么大——虽然它是经过压缩的。一张动态gif可能超过1M,比一张大bmp图片还要大。

动态gif图片一般网站是很少用到的,只有挂广告的网站上看得到。要不就是QQ表情网站,或一些娱乐网站。

3,图片不要过大或过多

过大的图片加载起来吃力,而且如果最终加载失败那整张图片都不会显示——也就是已经加载好的部分也白费了。

图片过多也不好,因为图片是并行下载的,也就是说如果网页里有10张图片,那默认他们都会同时加载(除非用特殊手段异步载入),如果网速不够好的话,总有那么几张会最终载入失败。

图片不要过多的另一个原因在于:加载每个图片都会发起一个http请求,这和尽量减少http请求的基本原则相悖了。

过大或过多的图片常见于淘宝网店等地方,随便打开一个网店,你都会觉得非常卡,而且网页会加载很长时间。

4,少用零碎图片

比如你是图标控,网页上的按钮啊列表啊都喜欢加上图标,而且这些图标各不相同。这些图标都不大,几K到10几K,但数量不少,简单的说就是零碎图片。不用零碎图片的原因参照前一个:图片不要过多。

如果你又想用漂亮图标,又不想造成零碎图片,那你就可以学习一下Css Sprite技术

另:应注意ie6不支持png背景半透明的无耻bug.

5,图片尽量外链

如果图片多的话。比如你打算建一个美女图库,如果图片都放在你空间里,那访问量一高,或者你的图片被人转载了,你的空间流量就有超载的危险。

只是,现在免费而又不限制外链的图库相册越来越少了。有人给我推荐个呗。

———————————————我割!————————————————————————————

简单的说,网页图片使用忌讳就这些,以后或许会补充。

1 评论

发表评论

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