 |
帖子主题: 对Gif图形的优化 |
头衔:论坛总管理员
|
Admin   |
荣誉：管理员
职务：总版主
级别：圣骑士
积分：547
经验：3330
文章：271
注册：03-01-20 23:27
|
|
|
 发表: 2006-11-14 17:15:22 人气:12877  
对Gif图形的优化
图形是网络的一个主要组成部分，如果网页中没有图形，就会变得十分呆板和乏味；不过，我经常发现有些站点由于图形太大，该网站的打开速度相当缓慢。有许多访问者不耐烦等这么长时间，往往会掉头离开。
经过优化的图形是一个站点设计良好的标志，而且它们第一个反映了网站开发人员的技术水平。接下来我们就对GIF文件格式做深入的解析，及如何对网站中的GIF文件进行优化。
我们从下面这两个简单的问题开始：
什么是图形的优化？
所谓图形的优化是指将图象文件的大小降到最低，同时对图形的外观又不会有(太大)改变的这样一个处理。
为什么需要对网络图形进行优化？
在网络上文件越小，下载速度越快，网站的内容就能够越快地呈现在用户眼前。
GIF－相关基础理论
GIF是图形交换格式(Graphics Interchange Format)的英文缩写，是由CompuServe公司于80年代推出的一种高压缩比的彩色图象文件格式。GIF采用无损数据压缩方法中压缩效率较高的LZW(Lempel-Ziv ＆ Welch)算法，针对的是8位颜色图形。GIF是唯一为所有图形浏览器所支持的图形格式。
LZW算法为图形构造了一个色彩表，图形中的每个颜色都对应一个象素。因而包含大面积同一色块的图形，其压缩效果十分理想。相对于其它格式而言，GIF更适用于线图和企业标识。
同样，LZW算法计算的是水平方向上变化的象素数。因而包含水平颜色变化的图形要比竖直颜色变化的图形大。
GIF压缩算法是无损数据压缩方法，即在原始图形转化为GIF格式的过程中，并没有信息被丢失。(注意：如果你的原始图形中包含了比256色还要多的颜色，那么就会丢失一些信息。不过一旦转换为GIF格式后，就不会再有信息丢失的问题。)。
GIF图形的优化：
一个GIG图形的大小主要取决于：
1). 图形的外形高度(宽度和高度)；
2). 图形所包含的颜色数量；
3). 图形的复杂程度；
1). 图形的外形高度(宽度和高度)
标准的图形编辑程序中都提供有一个“Crop”裁切工具，它可用于对图形进行裁切，去掉图形中不想要的部分。Crop工具的使用相当简单。
a) 对Paint Shop Pro，点击Crop工具按钮，左键选取图形，拖动鼠标进行选取即可。
b) 对Adobe Photo Shop，单击Selection工具按钮，左键选取图形，拖动选取自己感兴趣的区域，单击Crop按钮或从工具条上单击Image，在下拉菜单中选择Crop即可。
2). 图形所包含的颜色数量
GIF最多可包含256色。图形包含的色数越多则图形越大，下载所需时间也越长。在减少颜色深度时，显然要权衡考虑图形的外观。不过一般说来，颜色深度的减少对GIF图形的外观影响并不是很大。
下面我们给出控制色彩度的若干例子，注意每个图形的大小都不同。
GIF图形
图形特点 4色 256色 8色 256色
图形大小 234个字节 998个字节 275个字节 1,044字节
GIF图形
图形特点 4色 8色 16色 256色
图形大小 521个字节 706个字节 907个字节 1,896个字节
GIF图形
图形特点 8色 16色 256色
图形大小 879个字节 1,384个字节 3,288个字节
用Paint Shop Pro (5.0版本)来减少图形的颜色：
1) 打开或创建一个新文件。
2) 单击工具栏中的Colors，在弹出的菜单中选择Count Colors Used(计算所使用颜色)来了解图形中包含的颜色数量。注意：要确保图形在一个层面上，否则Paint Shop Pro计算的只是当前活动层上的颜色数量。
3) 单击工具栏中的Colors，在弹出的菜单中选择Decrease Color Depth(减少颜色深度)。Paint Shop Pro的菜单中提供了2色(1位)，16色(4位)，256色(8位)，32K色(24位)，64K色(24位)和X色(4/8 位)。32K色和64K色对GIF图形来说没用，因为GIF图形格式最大是8位(256色)。所以供你选择的应该是2，16或256色这三个选项。
4) X色对话框用于对图形的颜色深度进行较好的调节。你可以通过这个选项来为你的图形指定一个确切的颜色数量。你需要先减少图形的颜色数量，再把它提高到1千6百万种颜色，然后再次将颜色数量减少，以期获得一个满意的图形。也许这些操作看起来非常单调而乏味，不过它确实会极大地降低你图形的大小。
5) 也可使用Color Replacer工具将图形中相似的颜色去掉，从而达到以上目的。
用Corel Xara来减少图形的颜色：
在Corel Xara (2.0版本)中保存一个图形时，单击工具栏中的File，选择Export，然后从下拉式菜单中选择.gif扩展名，将文件存为GIF格式。 GIF export bitmap options(GIF输出位图选项)对话框中包提供若干选项。你可以通过选取选项来控制图形的抖动及选择颜色深度(8位，4位或2位)。亦可通过激活256(8位)单选按钮，在“Number of Colors”文字框中键入数值来为图形指定颜色数量。可选择图形的透明度，隔行和最终的大小。该软件中的预览按钮也是一个比较有用的特性。
用Adobe PhotoShop来减少图形的颜色：
在Adobe PhotoShop version 5.0中，当你输出一个GIF图形时，该程序提供有一个下拉式菜单，你可通过该菜单选择图形的颜色数量。也可选择调色板和透明度。PhotoShop的版本越高越适用于网络图形。
对Gif图形的优化（下）(出自http://www.21cnbj.com)
3) 图形的复杂程度
图形复杂程度－重访GIF压缩算法
LZW算法适用于有大面积同一色块的图形。对这种类型的图形采用LZW算法进行压缩，可以起到相当好的压缩效果。同时由于LZW算法将水平变化的象素计算在内。所以包含了水平颜色变化的图形要比那些具有垂直颜色变化的图形文件要大一些。在创建或保存一个GIF图形时，要记住这两点很重要的。
带有单色色块区域的图形
较网络上另一种被广泛应用的图形格式JPEG，GIF更适用于有大面积同一色块的图形。从下面的两个图形我们可以清楚的看出来。
图形
图形格式 GIF JPEG
图形大小 920个字节 3,174个字节
图形特点 图形十分清晰且每个色块锐边明显 文件大小是GIF图形格式的三倍，且图形不清晰
带有梯度变化的图形：
包含垂直渐变颜色的GIF图形较包含水平渐变颜色的GIF图形压缩比更大。
如图所示：
GIF图形
图形大小 1,471个字节 2,297个字节
图形特点 垂直渐变颜色 水平渐变颜色
图形复杂程度和限制抖动：
抖动不但使GIF图形的颜色数量增加，而且增加了图形的复杂性。LZW算法对单色色块区域的压缩效果相当好，但由于抖动的图形没有这样的区域，所以会使产生的图形文件变的相当大。
小技巧：Paint Shop Pro中的Replacer颜色取代工具对清除因抖动而产生的其它颜色非常有帮助。
GIF图形
图形大小 4,415个字节 3,313个字节
图形特点 抖动的GIF图形 无抖动的GIF图形
照片图形：
照片一般不推荐使用GIF格式，主要由于以下两个原因：
1). 照片一般包含的颜色远远超过256色；
2). 照片是非常复杂的图形，LZW算法没有能力对文件大小做适当的处理；
GIF图形
图形格式 256色GIF JPG
图形大小 26,779个字节 6,675个字节
-----------------------------------------------------| 相关帖子 | |
| 对Gif图形的优化 (Admin,12877,2006-11-14 17:15:22) |
|
|
回复帖子 注意: *为必填项 |
|
|
|
Copyright © 2018 外贸网站建设,SOHO英文网页制作,网站设计公司--伊路网络工作室 版权所有
本论坛内容纯属发表个人意见，与雪风伊路网络科技立场无关
论坛域名：bbs.elut.cn
页面执行时间:58毫秒
