网页设计中常用的图像和动画

    摘要 网页设计中不仅要用到文本和表格,还要用到图像和动画,如果图像和动画过多、过大,
会造成网页载入速度过慢

,这就要根据不同的用途选择不同的图像和动画格式,获得品质和大

小之间的最佳平衡。目前在网页设计中普遍使用的图像和动画格式有

GIF、JPG/JPEG、PNG

和

SWF,因为这些文件格式在网络上的传输速度很快,并且几乎被所有网页编辑软件和浏览

器所支持。

 

　　关键词

 网页设计;图像格式;动画格式;GIF、JPG、PNG 和 SWF 

　　

 

　　

1 引言 

　　

 

　　网页设计中的图像和动画具有直观性、趣味性

,可以使网页生动、活泼,富有感染力,然而

图像和动画的大小直接影响网页的载入速度

,尽管网络传输速度越来越快,但是图像和动画过

多过大依然会造成网页载入速度变慢。因此

,在保证清晰的基础上,图像和动画的大小越小越

好。这就要根据不同的用途选择不同的图像和动画格式

,获得品质和大小之间的最佳平衡。 

　　目前有许多图像和动画文件格式

,但只有一部分被广泛使用,在 Web 网页设计中普遍使

用的有

GIF、JPG/JPEG、PNG 和 SWF 格式。在计算机中,图像是以数字方式来记录、处理和存

储的

,动画实际上也是以一定的速度连续播放的静态图形图像画面,图形图像文件类型主要分

为位图图像和矢量图像

,GIF、JPG/JPEG、PNG 格式属于位图图像,SWF 格式是基于矢量图形

的动画文件。

 

　　位图图像也称为点阵图像或栅格图像

,由许多小方格样的不同色块即像素组成。像素是

位图图像中最小的单位

,像素中包含有位置和颜色的信息,当许许多多不同颜色的点组合在一

起后便构成一幅完整的图像。位图图像的色彩和色调变化丰富

,可以逼真地表现自然景观,达

到照片般的品质。当位图图像放大很多倍后

,可以看见构成整个图像的无数单个方块,图像出

现马赛克像素色块

,画面会模糊不清,边缘出现锯齿状。因此,位图图像的质量与分辨率有密切

的关系。位图图像在保存时

,需要记录每一个像素点的数据,因此文件占用的磁盘空间较大,处

理速度也就较慢。

 

　　矢量图像也称为面向对象的图像

,矢量图像中的图形元素称为对象,每一个对象都是一个

自成一体的实体

,由矢量的数学方程式所定义的直线和曲线组成,这些线条包含位置、尺寸、形

状、颜色等属性。由于只存储这些元素的代数式和属性

,因此所占用的磁盘空间较小。当编辑

一个矢量图像时

,修改的只是组成该图像的直线和曲线的属性,所以很容易进行移动、缩放、旋

转、改变形状和颜色等操作

,图像仍能保持清晰、平滑,丝毫不会影响到品质、精度,对象之间也

不会相互影响。矢量图像适用于制作图表或

logo,不宜制作色调丰富、色彩变化太多的图像,而

且绘制出来的图像不像位图那样能够达到照片般的逼真效果

,同时也不易在软件之间进行文

件交换。

 

　　

 

　　

2 图像和动画格式 

　　

 

　　

2.1 GIF 图像格式 

　　

GIF(Graphics Interchange Format)图形交换格式由 CompuServe 公司在 20 世纪 80 年代推