网页图片优化大全

一个好的站点，不但要有精彩的内容，还需要有一个美观的页面。谈到美观就离不开图片，在页面中适当地用一些精美的图片作为点缀，会使你的网页大放异彩。但是，图片使用不当，也会适得其反，把你的访问者给吓跑。主要原因在于图片尺寸太大，访问者还没等打开就早已不耐烦了。

    现在向大家介绍一些对图片进行处理的方法，以使图片能在网页中迅速显示出来。





选好图片格式



    图片文件的格式有很多，如GIF、JPEG（文件扩展名为.jpg）、BMP、PNG等，它们都是可以用浏览器浏览的，但到底选择哪种图片格式比较好呢？其实在一般情况下我们只需选择前面的两种，即GIF格式与JPEG格式。因为这两种文件格式能对图像进行很大程度的压缩，使得在产生相近视觉效果的前提下，图像文件尺寸却小很多。如果图像是通过扫描仪或者数码相机获取的，这种图片中所用到的色彩比较多，这时候我们应该选择使用JPEG格式来存储图像。如果图片色彩比较少，一般选择GIF格式。



减少图片色彩数量



    图片内色彩数量愈多，文件尺寸就愈大，在Paint Shop Pro软件的“Color”下拉菜单中，有一项“Decrease Color Depth”功能，它是用来减少图像所用颜色数目的，你可以选择其中的“16 Colors”，即将图片所使用的色彩数量减到16种颜色。当颜色数目减少后，如果你认为图像质量变化不大，这时你就可以选用GIF格式。



对图片进行适当压缩



    如果你认为色彩数量减少后图像的视觉效果明显变差，让你不能忍受，那么我们可以采用JPEG压缩格式。无论是使用什么样的图形处理软件，在以JPEG格式存盘时，都要向你询问JPEG的压缩比。通常，采样50%到70%的压缩率比较好。你不妨在这时试着使用256色的格式将图片存储成GIF格式，与JPEG格式的文件比一比哪个字节数更少、图像质量如何，最终再决定使用什么图像格式。



控制图片的尺寸



    图形尺寸越小，则字节数相应就会越少。这就要求在制作图像时，应尽量将图形四周无用的信息去掉，比如说你制作了一个非常漂亮的标题文字的图片，这个图片的背景最好与网页的底色相同或者用透明色，这时你制作的图片一定要让美术字尽量充满整个图像，不要让图片中底色边框过大。还有就是在制作网页使用图片时，可以添加“Width”和“Height”属性，即标注原始图片的长度与宽度。这样可以帮助浏览器迅速、准确地对网页的版面进行安排，避免浏览器在显示图片的过程中重新调整、配置网页的版面。

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



更改图片的显示方式



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

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

    逐级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”图片都是主图片的低分辨率、高压缩率的版本。

注意

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

特别提示

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