一、把握好jpg图片优化
质量高的jpg格式图片较质量低的图片清晰,色彩鲜艳,不少人就采取这种图片,其实这种图片非常影响速度的。因为质量越高,图片的体积也就越大,下载的速度就越慢。
2、尽量使用gif格式进行图片优化
做网页图标的话,gif是最好的格式。在像素级的显示上,gif的效果比jpg好许多。并且体积小。所以,在制作小图标或带有小字体的图片时,优先使用gif格式。这里涉及到颜色数的问题,gif格式能显示的颜色数量最多为256色,其实对不包含大量色彩渐变的图片来说,已经是非常足够了,因此,在制作颜色比较少的gif时,尝试一下降低颜色数,只要效果能过得去就行了。
3、插入装饰性图片优化的方法
这里要讲的不是简单的用img标签插入图像,用这种方法插入页面小图标等装饰性图片弊端是非常大的。首先,用img标签插入的图片不能通过简单的方法实现变换效果,在这里,美化效果要打个折扣。其次,用img插入的图片,如果图片不在浏览器缓存里,而且不重复出现的话,会大大增加http请求数。因为img标签理论上是出现一次载入一次的。其三,用img标签不利于调整图片位置,如果一个图片,需要在header靠右和footer靠左这两个位置出现两次,你就需要为它写两次css。其四,用img标签插入图片不利于整合,整合图片可以大大减少http请求数。
4、背景图片优化的处理
很多人喜欢用图片做页面元素的hover变换效果,但是却没有把相关的图片整合,导致一些变换效果有事会因为图片载入失败而失色。我们可以把针对某个效果的图片都整合成一个文件,在css里用background-position属性调整图片位置。这种做法的好处是背景只需要一次http请求,图片可以重复调用,也有利于图片变换。