网页主要由文本图像动画等基本组成 网页设计中常用的图像和动画

　　摘要 网页设计中不仅要用到文本和表格,还要用到图像和动画,如果图像和动画过多、过大,会造成网页载入速度过慢,这就要根据不同的用途选择不同的图像和动画格式,获得品质和大小之间的最佳平衡。目前在网页设计中普遍使用的图像和动画格式有GIF、JPG/JPEG、PNG和SWF,因为这些文件格式在网络上的传输速度很快,并且几乎被所有网页编辑软件和浏览器所支持。
　　关键词 网页设计;图像格式;动画格式;GIF、JPG、PNG和SWF
　　中图分类号:TP393.092 文献标识码:B 文章编号:1671-489X(2010)18-0084-02
　　Common Images and Animation in Web Design//Fu Xueyan
　　Abstract Web design uses not only the texts and tables, but also images and animation. Too many images and animation will result page loads too slow. It accesses to the best balance between quality and size according to different image and animation formats. Now graphics and animation format GIF,JPG/JPEG,PNG and SWF are commonly used in Web design, because the speed of these file formats on the network are very quickly and can be supported by almost all web editing software and browsers.
　　Key words Web design; image format; animation format; GIF, JPG, PNG and SWF
　　Author’s address Computer Department of Yanbian Staff & Workers University, Yanji, Jilin, China 133001
　　
　　1 引言
　　
　　网页设计中的图像和动画具有直观性、趣味性,可以使网页生动、活泼,富有感染力,然而图像和动画的大小直接影响网页的载入速度,尽管网络传输速度越来越快,但是图像和动画过多过大依然会造成网页载入速度变慢。因此,在保证清晰的基础上,图像和动画的大小越小越好。这就要根据不同的用途选择不同的图像和动画格式,获得品质和大小之间的最佳平衡。
　　目前有许多图像和动画文件格式,但只有一部分被广泛使用,在Web网页设计中普遍使用的有GIF、JPG/JPEG、PNG和SWF格式。在计算机中,图像是以数字方式来记录、处理和存储的,动画实际上也是以一定的速度连续播放的静态图形图像画面,图形图像文件类型主要分为位图图像和矢量图像,GIF、JPG/JPEG、PNG格式属于位图图像,SWF格式是基于矢量图形的动画文件。
　　位图图像也称为点阵图像或栅格图像,由许多小方格样的不同色块即像素组成。像素是位图图像中最小的单位,像素中包含有位置和颜色的信息,当许许多多不同颜色的点组合在一起后便构成一幅完整的图像。位图图像的色彩和色调变化丰富,可以逼真地表现自然景观,达到照片般的品质。当位图图像放大很多倍后,可以看见构成整个图像的无数单个方块,图像出现马赛克像素色块,画面会模糊不清,边缘出现锯齿状。因此,位图图像的质量与分辨率有密切的关系。位图图像在保存时,需要记录每一个像素点的数据,因此文件占用的磁盘空间较大,处理速度也就较慢。
　　矢量图像也称为面向对象的图像,矢量图像中的图形元素称为对象,每一个对象都是一个自成一体的实体,由矢量的数学方程式所定义的直线和曲线组成,这些线条包含位置、尺寸、形状、颜色等属性。由于只存储这些元素的代数式和属性,因此所占用的磁盘空间较小。当编辑一个矢量图像时,修改的只是组成该图像的直线和曲线的属性,所以很容易进行移动、缩放、旋转、改变形状和颜色等操作,图像仍能保持清晰、平滑,丝毫不会影响到品质、精度,对象之间也不会相互影响。矢量图像适用于制作图表或logo,不宜制作色调丰富、色彩变化太多的图像,而且绘制出来的图像不像位图那样能够达到照片般的逼真效果,同时也不易在软件之间进行文件交换。
　　
　　2 图像和动画格式
　　
　　2.1 GIF图像格式
　　GIF(Graphics Interchange Format)图形交换格式由CompuServe公司在20世纪80年代推出,采用连续色调、无损高压缩率的LZW(Lempel-Ziv-Welch)算法。这种压缩优于RLE(Run Length Encoding)压缩算法,无损压缩就是修改图像之后,图像质量没有损失。GIF使用颜色有限的调色板,最高支持8位256种颜色,故不能用于存储真彩色的图像,有时为了减小文件的大小还会采用更少的颜色数来进行存储。GIF适合压缩由多个单纯色块区域组成的色彩不太丰富的图像,可以用来制作小图、小按钮、icon(图标)、logo、卡通图像等。
　　最初GIF87a格式只能存储单幅静止图像,后来发展成为支持透明、交错、动画的GIF89a格式。透明是指可以给图像指定一种颜色,使其不被显示而成为透明。GIF图像格式能把背景存储成半透明形式,即全透明或是全不透明。交错是指图像在显示过程中用户先看到大致轮廓,随着图像的传输而逐渐变得清晰,这是一种与由上到下逐行显示方式不同的渐显方式,适合浏览者的观赏心理,避免长时间的等待。GIF动画就是将多幅静止图像保存在一个文件中,连续显示而形成动态画面,所以仍然属于图像文件格式,网页上很多的小动画都采用这种格式。
　　2.2 JPG/JPEG图像格式
　　JPG/JPEG(Joint Photographic Experts Group,联合图像专家组)图像格式利用人类视觉系统的一些局限性,采用有损压缩方式,压缩时图像中重复和不重要的数据会被丢弃,被删除的数据无法在解压时还原。因此,随着压缩率的提高,文件减小,图像品质也降低。通常图像编辑软件可以让用户选择存储JPG图像的压缩率,好在图像大小和品质之间进行权衡。由于每次保存JPG格式的图像时都会丢失一些数据造成像素失真,因而最好在创作完成之后输出一次JPG图像即可。实验证明,将JPG图像压缩为原来大小的10%,在显示器上观察时看不出明显的差异,几乎能保持图像的原貌。JPG的压缩算法十分先进,压缩比可达到2:1甚至40:1。
　　JPG格式可以保存8位、24位、32位深度的几百万种颜色的图像,适合存储较大的、真彩色的、多颜色相互交叉的、平滑过渡的风光人物图像。JPEG2000是JPG的升级版,压缩率比JPG高30%左右,支持有损和无损压缩、渐显方式,还可以任意指定图像上感兴趣的区域进行优先解压缩及提高压缩质量。
　　2.3 PNG图像格式
　　PNG(Portable Network Graphics)是一种可移植的无损高压缩率的图像格式。1994年底,Unysis公司宣布对GIF的压缩方法拥有专利,要求开发GIF软件的作者须缴交一定费用,由此促使了免费PNG图像格式的诞生。PNG一开始便汲取了GIF和JPG二者的优点,有支持基于调色板的PNG-8格式和基于真彩色的PNG-24、PNG-32格式,还支持二维隔行扫描的渐进显示方式,只需下载1/64的图像信息就可以显示出低分辨率的预览图像。但PNG不支持动画效果。
　　PNG提供一个可选的Alpha通道,实现图像的全透明,即透明度是多级可变的。Alpha通道是图像文件中包含的一个8位灰度信息,可以通过这个信息知道这幅图像中哪些地方需要透明。拥有Alpha通道的图像可以实现非矩形的边缘透明。制作网页时,可以把图像的某些部分设为透明,这样就可以很好地融入网页。
　　2.4 SWF动画格式
　　Flash是由美国Macromedia公司(现被Adobe并购)开发的一套矢量二维交互式动画设计软件,可以制作出后缀名为SWF(Shockwave Format)的动画文件,适合表现难以实现的、抽象的概念或现象。Flash软件通过多层透明效果和渐变变形技术,再结合Action脚本的交互功能,就可以将文字、图像、音频、视频等多种媒体融合在一起,制作出交互的高品质的动画效果。由于采用矢量图形和流式播放技术,使得所生成的动画文件非常小,并可以一边下载一边播放,从而能在最快的时间内将动画展现在浏览者的面前。它适合制作网页上的按钮、导航菜单、动画短片、音乐MV、交互式游戏、教学课件、宣传广告等。
　　
　　3 结束语
　　
　　实际应用中在保证品质的前提下,采用哪种格式生成的文件最小就用哪种,当然,为追求品质有时也要牺牲一定的速度。总之,随着网络速度的加快,就可以采用更多更大的图像和动画,使网页的视觉效果更加绚丽多彩。
　　
　　参考文献
　　[1]Li Zenian,Drew M S.多媒体技术教程[M].1版.史元春,译.北京:机械工业出版社,2007:48-52
　　[2]傅学彦.多媒体设计的软件系统[J].电脑知识与技术,2009,5(33):9444-9445
　　[3]赵月霞.关于网页图像格式的问题[EB/OL].[2007-12-23].https://www.省略/cl/Article/HTML/447.html