本文属于《高性能web前端优化指南》系列文章。
先放一张美女图,与主题无关:
色彩斑斓的图片,与文字相比有很多优势:更直观,更美观,更形象,而且可以简单的表达出需要一大段文字才能说清楚的事情。所以不管是在网页上,还是在生活中,图片的使用都很广。
现在的网速,对于网页图片加载应该是可以胜任了。只是对图片进行优化还是很必要的,不能因为有网速就尽量拖网速。本文简单说一下网页图片使用的一下忌讳。
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,图片尽量外链
如果图片多的话。比如你打算建一个美女图库,如果图片都放在你空间里,那访问量一高,或者你的图片被人转载了,你的空间流量就有超载的危险。
只是,现在免费而又不限制外链的图库相册越来越少了。有人给我推荐个呗。
———————————————我割!————————————————————————————
简单的说,网页图片使用忌讳就这些,以后或许会补充。
还有,少用圆角。。