分享
 
 
 

网页中图形处理的几种方法和技巧

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

随着 Internet的不断发展壮大,Internet 上的网页制作成了一门新兴科学。网页中不可避免地包含着一定数量的图形,因为较多的图像在增加吸引力的同时能给访问者提供更多更直接的信息,同时图像也较少受计算机平台、地域和语种的限制,能使网页更多地显示出制作者的创造力。

虽然图像具有上述优势,但是由于图像是在Internet网络上传送,而Internet线路目前的传输速率还不理想,特别是国内大多数用户是通过慢速拨号连入本地的ISP,因此图像的大小在很大程度上影响着网页的下载时间,制作不好的图像文件下载时更会浪费Internet的带宽。

由此可见我们在制作网页时优化图像的大小是非常关键的,优化后的图像也许仅仅减少了几千个字节,但当页面中不只是一幅图像,或不止一个用户且不止一次地访问该页面时,节省的下载时间和通道带宽将是巨大的。下面我们就浅谈一下制作网页时几种用来优化图形的常用格式。

GIF格式

GIF(Graphic Interchange Format图形互换格式)是为跨平台消费市场开发的,当时消费者还没有机会使用“高档”的图形卡,大多数计算机的图形颜色比256色还少,所以256色被作为可显示的最高数目。GIF也是Internet上使用最早、应用最广泛的图像格式。GIF格式储存8位/点至l位/点的图像。其原理是减少每点的存储位数以减小图像文件的大小,这就是我们通常所说的减色抖动dithering。准确地说,GIF减少了图像调色板中的色彩数量,从而在存储时达到减小图像文件大小 的目的。该调色板通常并非Windows本身提供的标准凋色板,而是图像优化处理后的调色板。

现在假定我们制作一幅全色图像(用photoshop的术语就是“RGB模式”),原图为120k的“PSD格式”,准备作成一份GIF的文件之前,必须将它用一个相关的颜色图转换成为一个受限制的8位图像(用photoshop的术语说就是工作于“索引颜色模式”)

由表1可看出,保持图像尺寸不变的情况下减少图像中每点的色彩数可以减少图像文件的大小。

尽管支持的颜色数目较少,GIF格式仍然因拥有一些Web上使用很广泛的特殊效果而留存至今。如:交错效果、透明颜色效果以及GIF89a(动画)效果。

交错

交错即图像下载时从模糊逐渐到清晰的过程。

当你查看一幅本地系统的图像时,通常图像都是一下子就全部显示出来而与用什么方式储存关系不大,但是在Internet网络上就不一样,当通过Internet慢慢地下载一个包括图像的文件,浏览器能边下载边显示收到的内容,此时就可以看到图像文件显示的顺序,GIF默认的存储图像顺序为从上到下、从左到右。当下载到一半时,只显示上半部图像。如果下载得慢而下半部图像是关键部位,则必须等待下半部图像的出现,这对用户来说是相当烦人的。

GIF允许图像进行交错处理,此时不再严格地从上到下、一行像素一行像素地显示,而且每隔八行处理一次,然后再填补其间的空隙直到清晰为止。下载过程好比是一幅粗线条的素描变成色彩分明的图像,交错后的GIF文件容量并不变化。这种效果处理主要用于处理一些尺寸比较大的图像。

GIF89α

GIF89α提供的动画实际上由多幅GIF图像组成,浏览器软件以每幅GIF图像定义的时间间隔顺序显示,形成动画效果。

我们可以把动画分成以下三种常见的类型 :

第一种类型是由多幅内容不相干但具有相同尺寸的GIF图像文件组成的动画文件,在质量允许的情况下,采用上述方法把组成GIF89α动画的每幅GIF文件的色彩数尽可能减少,便可以做到缩小文件。

第二种类型,我们仔细观察可以发现大部分动画的第二幅图像只是在第一幅图像的某些区域有一定的变化,因此在第二幅图像中可以只保存不相同区域的内容,这样可以极大地缩小文件。

第三种类型是有固定背景的动画,这样只须保存第二幅图像的前景并设背景为透明就可以了。

对于第二种和第三种类型我们必须保证组成动画的每幅GIF图像都使用相同的调色板进行减色抖动,同时第二幅图像定位必须准确。

如果我们使用一幅200×100(宽×高)点阵作背景,用上面的三种方法分别制作一幅类似于霓虹灯效果的 GIF89a动画交替显示“图像”两个字,我们将会发现三种方法的显示效果完全一样,但用第三种方法优化的文件比用第一种方法优化的小50%(表2)。

JPEG格式

由Joint Photographic Experts Group提出并因此而得名,是在Internet上被广泛支持的图像格式,JPG支持16M色彩也就是通常所说的24位颜色或真彩色,其典型的压缩比为4:1。由于人类眼睛并不能看出存储在一个全图像文件中的全部信息,可以去掉图像中的某些细节,并对图像中某些相同的色彩进行压缩。JPG是一种以损失质量为代价的压缩方式,压缩比越高,图像质量损失越大,适用于一些色彩比较丰富的照片以及24位图像。

表3是一幅原图为380k的“psd”格式图像在不同压缩比下进行压缩后的图像文件大小的比较 :

由此表可看出,在兼顾图像质量和大小的情况下,以中等(medium)方式对自然色彩的图像进行JPEG压缩最适宜。

JPEG只能对具有连续色调或连续灰阶的 24位图像进行压缩,对由8位转化成24位的图像没有优势。原因在于8位色彩的图像中相邻点的颜色变化比 24位大,JPEG对这类非连续色调图像的压缩将造成一种既占空间又损失图像质量的结果,在这种情况下JPEG的压缩效果可能比Gif更差。

由以上可看出 :

1.GIF和JPEG虽然能使图像文件变小,但是对图像的质量均有一定的影响,因此我们在处理图像GIF和JPEG格式之前最好先把图像原件备份。同时JPEG是一种积累压缩的方法,所以我们应尽可能地从原图一次压缩,而不要对已经压缩过的图像再进行压缩。

2.在GIF和JPEG之间进行选择时,要记住你的目标是在质量可以接受的情况下使图像的容量变为最小,通常是单调的颜色表示你能够大幅度减少颜色的数目,也就是说可以考虑使用GIF压缩。一条用黑与白绘制的线,最适合使用GIF,因为总的颜色数目可以减少。用JPEG处理照片(包括绘画的照片)比较合适,因为它们的阴影与色彩中包含有许多缓和的变化。高对比的“艺术”照片则例外,因为他们里面有单调区域,所以适合用GIF处理。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有