admin 管理员组

文章数量: 1086019


2024年5月7日发(作者：为什么使用二维数组)

８４　傅学彦：网页设计中常用的图像和动画　■技术在线　

ｉ０．３９６９／ｊ．ｉ　ｓｓｎ．１６７１—４８９Ｘ．２０１０．１８．０８４　

网页设计中常用的图　

像和动画　

傅学彦　

延边职工大学计算机系吉林延吉　１３３００１　

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

入速度过慢，这就要根据不同的用途选择不同的图像和动画格式，获得品质和大小之间的最佳平衡。目前在网页　

设计中普遍使用的图像和动画格式有ＧＩＦ、ＪＰＧ／ＪＰＥ６、ＰＮＧ￥￣ＳＷＦ，因为这些文件格式在网络上的传输速度很快，　

并且几乎被所有网页编辑软件和浏览器所支持。　

关键词网页设计：图像格式；动画格式；ＧＩＦ、ＪＰＧ、ＰＮ６和ＳＷＦ　

中图分类号：ＴＰ３９３．０９２　文献标识码：Ｂ　文章编号：１６７１—４８９Ｘ（２０１０）１８—００８４—０２　

Ｃｏｍｍｏｎ　Ｉｍａｇｅｓ　ａｎｄ　ＡｎｉｍａｔｉＯＲ　ｉ　ｎ　Ｗｅｂ　Ｄｅｓｉｇｎ／／Ｆｕ　Ｘｕｅｙａｎ　

Ａｂｓｔｒａｃｔ　Ｗｅｂ　ｄｅｓｉｇｎ　ｕｓｅｓ　ｎｏｔ　ｏｎｌｙ　ｔｈｅ　ｔｅｘｔｓ　ａｎｄ　ｔａｂｌｅｓ，ｂｕｔ　ａｌＳＯ　ｉｍａｇｅｓ　ａｎｄ　ａｎｉｍａｔｉｏｎ．Ｔｏｏ　ｍａｎｙ　

ｉｍａｇｅｓ　ａｎｄ　ａｎｉｍａｔｉｏｎ　ｗｉ　１１　ｒｅｓｕｌｔ　ｐａｇｅ　ｌｏａｄｓ　ｔｏｏ　ｓｌｏｗ．Ｉｔ　ａｃｃｅｓｓｅｓ　ｔｏ　ｔｈｅ　ｂｅｓｔ　ｂａｌａｎｃｅ　ｂｅｔｗｅｅｎ　

ｑｕａｌｉｔｙ　ａｎｄ　ｓｉｚｅ　ａｃｃｏｒｄｉｎｇ　ｔｏ　ｄｉｆｆｅｒｅｎｔ　ｉｍａｇｅ　ａｎｄ　ａｎｉｍａｔｉｏｎ　ｆｏｒｍａｔｓ．Ｎｏｗ　ｇｒａｐｈｉｃｓ　ａｎｄ　ａｎｉｍａｔｉｏｎ　

ｆｏｒｍａｔ　ＧＩＦ，ＪＰＧ／ＪＰＥＧ，ＰＮ６　ａｎｄ　ＳＷＦ　ａｒｅ　ｃｏｍｍｏｎｌｙ　ｕｓｅｄ　ｉｎ　Ｗｅｂ　ｄｅｓｉｇｎ，ｂｅｃａｕｓｅ　ｔｈｅ　ｓｐｅｅｄ　ｏｆ　ｔｈｅｓｅ　ｆｉｌｅ　

ｆｏｒｍａｔｓ　ｏｎ　ｔｈｅ　ｎｅｔｗｏｒｋ　ａｒｅ　ｖｅｒｙ　ｑｕｉｃｋｌｙ　ａｎｄ　ｃａｎ　ｂｅ　ｓｕｐｐｏｒｔｅｄ　ｂｙ　ａｌｍｏｓｔ　ａｌｌ　ｗｅｂ　ｅｄｉｔｉｎｇ　ｓｏｆｔｗａｒｅ　

ａｎｄ　ｂｒｏｗｓｅｒｓ．　

Ｋｅｙ　ｗｏｒｄｓ　Ｗｅｂ　ｄｅｓｉｇｎ：ｉｍａｇｅ　ｆｏｒｍａｔ：ａｎｉｍａｔｉｏｎ　ｆｏｒｍａｔ：ＧＩＦ，ＪＰＧ，ＰＮＧ　ａｎｄ　ＳＷＦ　

Ａｕｔｈｏｒ’Ｓ　ａｄｄｒｅｓｓ　Ｃｏｍｐｕｔｅｒ　Ｄｅｐａｒｔｍｅｎｔ　ｏｆ　Ｙａｎｂｉａｎ　Ｓｔａｆｆ＆Ｗｏｒｋｅｒｓ　Ｕｎｉｖｅｒｓｉｔｙ，Ｙａｎｊｉ，Ｊｉｌｉｎ，Ｃｈｉｎａ　１３３００１　

１引言　

和存储的，动画实际上也是以一定的速度连续播放的静态图　

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

形图像画面，图形图像文件类型主要分为位图图像和矢量图　

网页生动、活泼，富有感染力，然而图像和动画的大小直接　

像，ＧＩＦ、ＪＰＧ／ＪＰＥＧ、ＰＮＧ格式属于位图图像，ＳＷＦ格式是基　

影响网页的载入速度，尽管网络传输速度越来越快，但是图　于矢量图形的动画文件。　

像和动画过多过大依然会造成网页载入速度变慢。因此，在　位图图像也称为点阵图像或栅格图像，由许多小方格样　

保证清晰的基础上，图像和动画的大小越小越好。这就要根　

的不同色块即像素组成。像素是位图图像中最小的单位，像　

据不同的用途选择不同的图像和动画格式，获得品质和大小　素中包含有位置和颜色的信息，当许许多多不同颜色的点组　

之间的最佳平衡。　

合在一起后便构成一幅完整的图像。位图图像的色彩和色调　

目前有许多图像和动画文件格式，但只有一部分被广泛　变化丰富，可以逼真地表现自然景观，达到照片般的品质。　

使用，在Ｗｅｂ网页设计中普遍使用的有ＧＩＦ、ＪＰＧ／ＪＰＥＧ、ＰＮＧ　当位图图像放大很多倍后，可以看见构成整个图像的无数单　

和ＳＷＦ格式。在计算机中，图像是以数字方式来记录、处理　个方块，图像出现马赛克像素色块，画面会模糊不清，边　

作者：讲师，计算机及应用专业工学学士，主要研究方向为网页设计、动漫、多媒体。　

此外，第二个方法是针对一般配置的电脑及现在用的最　ＥＤＩＵＳ　５，暂时没有解决方案。　

普遍的Ｐｒｅｍｉｅｒｅ版本。Ｐｒｅｍｉｅｒｅ　Ｐｒｏ２．０对电脑的要求最低　

专业影视制作一直是广播级制作的一个不可缺少的补充，　

在５１２　Ｍ内存就可以工作。本文所指的电脑一般配置为：ＣＰＵ　在数字化、网络化时代到来之后，二者之间在应用上产生一定重　

为酷睿双核以上，内存１　Ｇ以上；低配置（指能实现操作，　

叠。相信今后各大公司会相继推出成熟的支持ＡｖＣＨＤ高清格式的　

但速度很慢且容易死机或发生不可预知错误等），ＣＰＵ奔　

编辑软件，高清编辑在不久的将来应该会变得很简单，但现在还　

４／２．４以上，内存５１２　Ｍ以上。再低的电脑配置基本无法运行　

只能在各个软件中通过不断的实践测试，寻求最优的方案。　

参考文献　

［１］李赞．ＤＶ与ＮＬＥ：了解数字视频，用好编辑软件［Ｊ］．消费导刊，２００８（５）　

［２］ＡＶＣＨＤ行业用户的高清选择［Ｊ］．中国电化教育，２００８（４）　

［３］田中燕，江一山．ＡＶＣＨＤ格式的无卡编辑初探［Ｊ］．电视字幕：特技与动画，２００８（４）　

２０１０￣Ｖ６）￣下第ｌ８期（总第２Ｏ４期）　

■Ｉｆ－—　一　

霹技术在线　傅学彦：网页设计中常用的图像和动画　８５　

缘出现锯齿状。因此，位图图像的质量与分辨率有密切的关　

让用户选择存储ＪＰＧ图像的压缩率，好在图像大小和品质之　

系。位图图像在保存时，需要记录每一个像素点的数据，因　

间进行权衡。由于每次保存ＪＰＧ格式的图像时都会丢失一些　

数据造成像素失真，因而最好在创作完成之后输出一次ＪＰＧ　

此文件占用的磁盘空间较大，处理速度也就较慢。　

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

图像即可。实验证明，将ＪＰＧ图像压缩为原来大小的１０％，在　

元素称为对象，每一个对象都是一个自成一体的实体，由矢　

显示器上观察时看不出明显的差异，几乎能保持图像的原　

　

量的数学方程式所定义的直线和曲线组成，这些线条包含位　

貌。ＪＰＧ的压缩算法十分先进，压缩比可达到２：１甚至４０：１。

置、尺寸、形状、颜色等属性。由于只存储这些元素的代数　

ＪＰＧ格式可以保存８位、２４位、３２位深度的几百万种颜色的　

式和属性，因此所占用的磁盘空间较小。当编辑一个矢量图　

图像，适合存储较大的、真彩色的、多颜色相互交叉的、平滑过　

ＬＪＰＧ高　

像时，修改的只是组成该图像的直线和曲线的属性，所以很　

渡的风光人物图像。ＪＰＥＧ２０００是ＪＰＧ的升级版，压缩率Ｌ

容易进行移动、缩放、旋转、改变形状和颜色等操作，图像　

３０％左右，支持有损和无损压缩、渐显方式，还可以任意指定图　

　

仍能保持清晰、平滑，丝毫不会影响到品质、精度，对象之　

像上感兴趣的区域进行优先解压缩及提高压缩质量。

间也不会相互影响。矢量图像适用于制作图表或ｌｏｇｏ，不宜　２．３　ＰＮＧ图像格式　

制作色调丰富、色彩变化太多的图像，而且绘制出来的图像　

件之间进行文件交换。　

ＰＮＧ（Ｐｏｒｔａｂｌｅ　Ｎｅｔｗｏｒｋ　Ｇｒａｐｈｉｃｓ）是一种可移植的无　

的压缩方法拥有专利，要求开发ＧＩＦ软件的作者须缴交一定　

费用，由此促使了免费ＰＮＧ图像格式的诞生。ＰＮＧ一开始便汲　

取了ＧＩＦ￣ＨＪＰＧ－－者的优点，有支持基于调色板的ＰＮＧ一８格式　

不像位图那样能够达到照片般的逼真效果，同时也不易在软　

损高压缩率的图像格式。１９９４年底，Ｕｎｙｓｉｓ公司宣布对ＧＩＦ　

２图像和动画格式　

２．１　ＧＩＦ图像格式　

由ＣｏｍｐｕＳｅｒｖｅ公司在２０世纪８０年代推出，采用连续色调、　

优于ＲＬＥ（Ｒｕｎ　Ｌｅｎｇｔｈ　Ｅｎｃｏｄｉｎｇ）压缩算法，无损压缩就　

ＧＩＦ（ＧｒａｐｈｉＣＳ　Ｉｎｔｅｒｃｈａｎｇｅ　Ｆｏｒｍａｔ）图形交换格式　和基于真彩色的ＰＮＧ一２４、ＰＮＧ－３２格式，还支持二维隔行扫描　

的渐进显示方式，只需下载１／６４的图像信息就可以显示出低　

ＰＮＧ提供一个可选的Ａｌｐｈａ通道，实现图像的全透明，即　

无损高压缩率的ＬＺＷ（Ｌｅｍｐｅｌ—ｚｉｖ—ｗｅ１ｃｈ）算法。这种压缩　分辨率的预览图像。但ＰＮ６不支持动画效果。　

是修改图像之后，图像质量没有损失。ＧＩＦ使用颜色有限的　透明度是多级可变的。Ａｌｐｈａ通道是图像文件中包含的一个　

调色板，最高支持８位２５６种颜色，故不能用于存储真彩色的　８位灰度信息，可以通过这个信息知道这幅图像中哪些地方　

图像，有时为了减小文件的大小还会采用更少的颜色数来进　

需要透明。拥有Ａｌｐｈａ通道的图像可以实现非矩形的边缘透　

行存储。ＧＩＦ适合压缩由多个单纯色块区域组成的色彩不太　明。制作网页时，可以把图像的某些部分设为透明，这样就　

丰富的图像，可以用来制作小图、小按钮、ｉｃｏｎ（图标）、　

ｌｏｇｏ、卡通图像等。　

最初ＧＩＦ８７ａ格式只能存储单幅静止图像，后来发展成　

可以很好地融入网页。　

２．４　ＳＷＦ动画格式　

Ｆｌａｓｈ是由美国Ｍａｃｒｏｍｅｄｉａ公司（现被Ａｄｏｂｅ并购）开　

为支持透明、交错、动画的ＧＩＦ８９ａ格式。透明是指可以给图　发的一套矢量二维交互式动画设计软件，可以制作出后缀名　

像指定一种颜色，使其不被显示而成为透明。ＧＩＦ图像格式　

为ＳＷＦ（Ｓｈｏｃｋｗａｖｅ　Ｆｏｒｍａｔ）的动画文件，适合表现难以实　

能把背景存储成半透明形式，即全透明或是全不透明。交错　

现的、抽象的概念或现象。Ｆｌａｓｈ软件通过多层透明效果和　

是指图像在显示过程中用户先看到大致轮廓，随着图像的传　渐变变形技术，再结合Ａｃｔｉｏｎ脚本的交互功能，就可以将文　

输而逐渐变得清晰，这是一种与由上到下逐行显示方式不同　字、图像、音频、视频等多种媒体融合在一起，制作出交互　

的渐显方式，适合浏览者的观赏心理，避免长时间的等待。　的高品质的动画效果。由于采用矢量图形和流式播放技术，　

ＧＩＦ动画就是将多幅静止图像保存在一个文件中，连续显示　使得所生成的动画文件非常小，并可以一边下载一边播放，　

而形成动态画面，所以仍然属于图像文件格式，网页上很多　

从而能在最快的时问内将动画展现在浏览者的面前。它适合　

的小动画都采用这种格式。　

２．２　ＪＰＧ／ＪＰＥＧ图像格式　

ＪＰＧ／ＪＰＥＧ（Ｊｏｉｎｔ　Ｐｈｏｔｏｇｒａｐｈｉｃ　Ｅｘｐｅｒｔｓ　Ｇｒｏｕｐ，联合　

制作网页上的按钮、导航菜单、动画短片、音乐ＭＶ、交互式　

游戏、教学课件、宣传广告等。　

３结束语　

实际应用中在保证品质的前提下，采用哪种格式生成的　

图像专家组）图像格式利用人类视觉系统的一些局限性，采　

用有损压缩方式，压缩时图像中重复和不重要的数据会被丢　文件最小就用哪种，当然，为追求品质有时也要牺牲一定的　

弃，被删除的数据无法在解压时还原。因此，随着压缩率的　

速度。总之，随着网络速度的加快，就可以采用更多更大的　

提高，文件减小，图像品质也降低。通常图像编辑软件可以　图像和动画，使网页的视觉效果更加绚丽多彩。　

参考文献　

［１］Ｌｉ　Ｚｅｎｉａｎ，Ｄｒｅｗ　Ｍ　ｓ．多媒体技术教程［Ｍ］．１版．史元春，译．北京：机械工业出版社，２００７：４８—５２　

［２］傅学彦．多媒体设计的软件系统［Ｊ］．电脑知识与技术，２００９，５（３３）：９４４４—９４４５　

［３］赵月霞．关于网页图像格式的问题［ＥＢ／ＯＬ］．［２００７—１２—２３］．ｈｔｔｐ：／／ｗｗＷ．ｐｙｓｌｃ．ｃｏｍ／ｃ１／Ａｒｔｉｃｌｅ／ＨＴＭＬ／４４７．ｈｔｍｌ　

２０１０年６月下第ｌ８期（总第２０４期）　

中国教育技术装备　


本文标签： 图像 动画 网页 格式

版权声明：本文标题：网页设计中常用的图像和动画 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1715050919a685416.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。