sina.com.cn
新浪首页|免费邮件|用户注册|网站地图

科技时代

新浪首页 > 科技时代 > 网上学园 > 主页制作 > 中国电脑教育报 > 正文







让你的网页五彩缤纷--网页图片处理

http://tech.sina.com.cn 2000/12/28 11:08 中国电脑教育报 太子

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

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

  选好图片格式

  图形格式有很多,如GIF、JPEG(文件扩展名为.jpg)、BMP、PNG、SWF、SVG、TIFF(文件扩展名为.tif)等,它们都可以用浏览器浏览的,但到底选择哪种图片格式比较好呢?其实我们一般情况下只需选择前面的两种,即GIF格式与JPEG格式。因为这两种文件格式能对图像进行很大程度的压缩,使得在产生相近视觉效果的前提下,图像文件的容量却小很多。如果图像是通过扫描仪(或者数字相机)获取的,这种图片中所用到的色彩比较多,这时候我们应该选择使用JPEG格式来存储图像。如果图形是由你自己使用Photoshop、Paint Shop Pro等软件制作的,一般选择GIF格式。

  减少图片色数

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

  对图片进行适当加压

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

  控制图片的尺寸

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

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

  更改图片的显示方式

  图像减肥的方法已经全部送上,也就是说图像的字节数已经是无法再减少了。但是,我们还可以想办法在图像文件大小一定的情况下,让浏览者可以耐心等待图像全部出来(抓住浏览者的心,^_^)的方法。其方法是采用隔行GIF和逐级JPEG方式。隔行GIF是指图像文件是按照隔行的方式来显示的,比如先出奇数行,再出偶数行,造成图像是逐渐变清楚的。将图像文件保存成隔行GIF格式的方法是,在Photoshop中进行保存时,选择“Interlaced”(不要选择“Normal”),在Paint Shop Pro中进行保存时,点击“Option…”按钮,选择“Interlaced”(不要选择“Non Interlaced”)。逐级JPEG文件可以让图像先以比较模糊的形式显示,随着图像文件数据不断从网上传过来,图像会逐渐变清晰。将图像文件保存成逐级JPEG格式的方法是,在Photoshop中进行保存时,选择“Progressive”,在Paint Shop Pro中进行保存时,点击“Option…”按钮,选择“Progressive encoding”。

  选用“low source”图片

  如果在网页上要放一个较大的图片的时候,不妨选用“low source”(预览图)图片的方法。即在显示原图之前,先提供一个解像度略差或长宽度略小的图片当做“low source”,使得浏览器可以先快速地展现出这个“low source”图片,然后再渐渐地以高画质或较大图片取代之。通常,“low source”图像都是主图像的低分辨率、高压缩率的版本。在原始文件时标注“low source”的方法为:

  其中temp.gif是原图,而preview.gif是预览图。

  特值得注意的是:其中的width=″x″ height=″y″是指src的长宽度,并非 lowsrc的长宽度。如果你不加上width=″x″ height=″y″的标示,浏览器将一律视为以较小图片作为长宽尺寸。

  最后,还要说明一点的是:在制作图片时,单张图片不要超过30KB,每页图片总量不要超过60KB(一般情况)。据统计分析,每页不超过60KB图片的网页,其下载速度是可以让人接受的。所有的图片都必须“减肥”小图片(100×40)一般可以控制在6KB以内,动画控制在15KB以内,较大的图片可以“分割”成小图片。好了,说了怎么多,大家也可以动手试一试,让我们大家的网页一起五彩缤纷吧。




网站简介 | 用户注册 | 广告服务 | 招聘信息 | 中文阅读 | Richwin | 联系方式 | 帮助信息 | 网站律师

Copyright © 1996 - 2000 SINA.com, Stone Rich Sight. All Rights Reserved

版权所有 四通利方 新浪网