本文属于《高性能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，图片尽量外链

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

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

———————————————我割！————————————————————————————

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