网页图片优化大全(2)
文/王新禧 图/贾东平　　2001-07-20 14:39:54

　　
　　
　　图2

　　图片长宽度的标注方法为：width=x，height=y。其中的“x”、“y”表示图片的长宽各为多少像素（Pixels）。需要说明的是，这个宽度和高度与图片本身的尺寸无关。也就是说，在一个大的图片上我们可通过更改图片这两个属性使图片在显示的时候变形，可以变大，也可以变小。

　　更改图片的显示方式

　　图片减肥的方法已经全部送上，也就是说图片的字节数已经是无法再减少了。但是，我们还可以想办法在图片文件大小一定的情况下，让浏览者可以耐心地等待图片全部出来（抓住浏览者的心，^_^）的方法。其方法是采用隔行GIF和逐级JPEG方式。

　　隔行GIF是指图片文件按照隔行的方式来显示，比如先出奇数行，再出偶数行，造成图片是逐渐变清楚的。将图片文件保存成隔行GIF格式的方法是：在Photoshop中进行保存时，选择“Interlaced”（如图1）；在Paint Shop Pro中进行保存时，点击“Option…”按钮，选择“Interlaced”（不要选择“Non Interlaced”）。
　　
　　图3

　　逐级JPEG文件可以让图片先以比较模糊的形式显示，随着文件数据不断从网上传过来，图片逐渐变清晰。将图片文件保存成逐级JPEG格式的方法是：在Photoshop中进行保存时，选择“Progressive”，图2是Photoshop 6.0英文版中的选项菜单，图3是Photoshop 5.0中文版中的选项菜单。我们可以发现，在6.0中还增加文件尺寸与使用Modem下载时所需时间的指示，使我们的工作更加方便了。在Paint Shop Pro中进行保存时，点击“Option…”按钮，选择“Progressive encoding”。

　　选用low source图片

　　如果在网页上要放一个较大的图片的时候，不妨选用“low source”（预览图）图片的方法。即在显示原图之前，先提供一个解析度略差或长宽度略小的图片当做“low source”，使得浏览器可以先快速地展现出这个“low source”图片，图4是Dreamweaver中的图片属性面板。然后再渐渐地以高画质或较大图片取代之。通常，“low source”图片都是主图片的低分辨率、高压缩率的版本。
　　
　　图4


　　注意

　　其中的width=x，height=y是指Src（主图片）的长宽度，并非Low Src（预览图）的长宽度。如果你不加上width=x，height=y的标示，浏览器将一律视为以较小图片作为长宽尺寸。

　　特别提示

　　最后，还要说明一点的是：在制作图片时，单张图片不要超过30KB，每个网页的图片总量不要超过60KB（一般情况）。据统计分析，每页不超过60KB图片的网页，其下载速度是可以让人接受的。所有的图片都必须“减肥”为小图片（100×40），一般可以控制在6KB以内，动画控制在15KB以内，较大的图片可以分割成小图片。

　　好了，说了这么多，大家也可以动手试一试，让大家的网页一起五彩缤纷吧!

|首　页||上一页|