转贴自[Macromedia中国]
原作地址:http://www.macromedia.com/cn/devnet/contribute/articles/convert_images.html
尽管向网页添加文本非常简单 - 使用某个产品(如 Macromedia Contribute)键入即可,但用户也希望添加照片、图表或徽标。这就不是那么简单了。一些是一些有益的提示,可帮助用户向其网站添加图像,而不会影响视觉效果。
行为科学的理论是"一张图相当于一千个字",不过在 web 上,图像确实比文本需要更多的下载时间。一个 6K 的小型图像相当于一千个字,因此站点撰稿人应尽量少使用图像,否则就会冒惹怒和疏远读者的风险,因为他们要等待这些图像下载。
幸运的是,可采用许多方法使 web 图形的文件大小最小化。就象扁平包装的家具*或浓缩汤罐一样,图像可以"压缩",在传送时变小,而在浏览器中显示时可"恢复"到原始状态(或非常接近原始状态)。
要压缩图像文件,只需用适当的文件格式*保存它即可,剩下的工作可交给浏览器来做。有两种主要的文件格式可执行此功能,特别是对 web 图形,至于选择哪一种格式则取决于图像。
但是,在压缩图像之前,应首先在图像编辑程序中调整它的大小,使之具有将在网页上显示的最终大小。让浏览器缩放图像不是一个好主意,因为这会影响文件大小,减慢页面的显示速度。原始图像在缩小之前,应始终大于所需的尺寸。放大一个过小的图像绝不会产生良好的效果,因为清晰度无从开始,也无法生成。
运用 JPEG 格式添加照片
将照片放在网页上需要从库存照片库找到适合的东西。否则,您将需要扫描现有的透明度或打印或用数码相机拍摄照片。原始图像可以使用任意数量的文件格式(TIFF、PNG、PSD)保存,具体情况取决于您的照相机和软件。网上照片的最佳文件格式是 JPEG("jay peg"),文件扩展名为 .jpg。JPEG 格式压缩文件的方法非常复杂,但是您需要担心的是较小的文件大小会牺牲图像质量。JPEG 格式是一种"有损耗的"格式,这意味着在压缩图像文件大小的过程中,某些图像的质量会荡然无存。
高画质的 JPEG 图像具有较大的文件大小,低画质 JPEG 的文件大小较小。这两种极端之间的某一处就是看起来几乎与原始图像不分彼此的最佳文件大小。您必须用肉眼来判断这个最佳点。您通常会在图像编辑程序中预览图像的质量,并运用滑动块控件进行调整*。随着文件大小和质量的下降,浅色区域和对象边缘周围就会出现难看的污点("压缩产物")。当开始出现这些污点时,可减小压缩比例。当压缩产物的痕迹很小或没有痕迹时,您就达到了不影响视觉质量的压缩极限。
以下是我所讨论的问题的一些示例︰
来自 Photo-CD 的这个文件最初大约为 62K。通过适度压缩,我将它减小为更加可管理的 15K。画质损失极其细微,不易觉察。
这个版本压缩比更高,大小为 6.5K,但是画质损失非常明显,特别是云层的边缘周围。
在最大压缩比下,文件大小大约为 5K,但是画质很差。假定它的大小只有大约 1.5K,比前一个图像还小,您就会明白如何适当地平衡文件大小和画质。
在找到理想的照片压缩尺寸后,一定要用编辑程序的本机文件格式保存原始未压缩文件的副本。如果您曾经调整或重新保存过某个 JPEG 文件,每次都会增加更多"损耗",不仅使图像效果更差,而且也可能增加文件大小。
运用 GIF 格式添加浅色图像
对于徽标或其它颜色最浅、无浓淡过渡(比如无阴影)的图像,最好使用 GIF (.gif) 格式。(有些人将 GIF 拼读为"jiff",实际上它是 Graphic Image Format(图形图像格式)的首字母缩写,因此应拼读为 G。)GIF 格式不适合具有许多巧妙颜色混合的照片或插图。事实上,图像中的颜色越少,GIF 文件就会越小。
我给大家演示一下。当用 GIF 格式以与最佳 JPEG 图像可比的文件大小保存时,这个画面会显示图像如何"分色"为多个浅色区域,微妙的浓淡渐变完全丢失:
为最大限度地减少这种带化条纹,您要么必须以更高的颜色深度保存文件,要么必须打开"抖动",这意味着用已经存在的色点模式模拟浓淡渐变。该图像不仅比其 JPEG 对等文件更大,而且效果更差。
以下是 GIF 的工作原理。GIF 格式会简单地计算任意行中同一颜色的像素数,而不是记住图像中每个像素的颜色。打个比方,在真实世界中,说"这个文具盒中有 12 支红铅笔、5 支蓝铅笔和 1 支黄铅笔"远比说"这是一支红铅笔,这是一支红铅笔,这是一支红铅笔……"更为有效。基本上,GIF 只计算单个颜色的像素数,而不是各个像素值的总数。这比 JPEG 压缩更加有效,更为紧凑。
您需要做出的 GIF 决定如下:"我能使用多少颜色?"如果您在白色背景上扫描一个蓝色徽标,并调整其大小,以合适地放在网页的可用空间中,则必须为图像选择一种颜色深度(或位深度)。这决定使用多少颜色来显示图片。最小的颜色深度是两个颜色(一个前景色和一个背景色),但是这会加深徽标像素,使其边缘变得粗糙、参差不齐。运用四种颜色,边缘效果会有改善,但是仍然有点凹凸不平。使用八种颜色会使它们看起来非常平滑。为单色徽标使用八种以上颜色不可能在视觉上改进图像画质,只会不必要地增加文件大小。
此时图像将利用蓝色的众多半色调平滑地从蓝色前景混合到白色背景。8 个色阶通常已经足够,但是如果徽标具有不只一种颜色,最好也使用其它颜色的相同色阶数。一个 GIF 图像能够处理的最大颜色数是 256,但是 256 色图像的文件大小比只有 8 色的图像更大。
接下来介绍另一个示例。下面的 Jasmine 徽标示例显示了减少图像中颜色数量的效果。尽管文字只是边缘平滑的单一颜色,但徽标包含一个具有细微渐变颜色的彩色鹦鹉。必须再现浅色文字,保留鹦鹉身上的细微颜色:
这个 256 色 GIF 很好地再现了图像,但文件大小为 4.4K。
降至 128 色几乎不会产生视觉差别,但文件大小更小 (3.62K)。
减至 64 色,图像仍然可以接受,而且文件大小减小至 2.87K。这可能是我们能对这个特定徽标所做的最佳工作。
减至 32 色(文件大小为 2.37K),上面翅膀中的细微颜色混合会分成三个不同的区域。
进一步减至 16 色,会进一步减少细微颜色。如果您发现这种色调可以接受,则这仍可能是可以接受的徽标表示,而且现在文件大小只有 1.94K。
即使只有八种颜色 (1.5K),也可以辨别出鹦鹉。另请注意的是,文字根本不受影响。有足够的颜色来提供平滑的边缘。
减至只有四种颜色,文件大小仅有 1.14K,但是鹦鹉只有一个基本轮廓,而且文字外观凸凹不平,因为没有足够的颜色将它平滑地混合到背景中。注意,图像中已丢失了黄色。
显然,两种颜色不足以再现该图像,而且 0.76K 的文件大小有点滑稽。您只能对简单的长方形使用两种颜色。
将该徽标保存为大小类似于最佳 GIF (2.54K) 的 JPEG 文件,就会显示出 JPEG 格式是多么不适合这种图像。JPEG 不能很好地处理浅色。
使一种 GIF 颜色透明
您可以运用 GIF(而不是 JPEG)将其中一种颜色指定为透明。透明色可使背景具有透视效果。如果网页具有纹理或图案背景,这非常有用。但是,这里需要特别留意,因为如果原始图像位于白色背景中,然后粘贴在具有蓝色背景的网页上,效果就会失真。由于文字边缘的半色调会逐渐改变为白色,而不是蓝色,因此文字周围最终会出现白色晕圈。
为使之正确显示,应首先将该图像放在图像编辑程序的最终意向网页背景色中,然后使该背景色透明*。如果背景是纹理或图案,可以使用主色或"平均"色。
我的观点如下:
![](http://www.macromedia.com/cn/devnet/contribute/articles/convert_images/jasminetransw.gif)
![]() |
使该徽标中的白色背景透明(左边),然后将图像放在蓝色背景中是无法获得正确效果的。随着图像的软边缘渐变成白色,它们会在蓝色背景中造成一个晕圈(右边)。
![](http://www.macromedia.com/cn/devnet/contribute/articles/convert_images/jasminetransb.gif)
![]() |
在这里,原始图像位于蓝色背景中,我在图像编辑程序中使之透明(左边),可提供正确的边缘混合,即"抗混叠"(右边)。
保持较小的文件大小(和页大小)
首先应尽可能使各个图形文件保持较小的大小,接下来在一个网页上加入多少个图形也是一个问题。如果将一张照片的文件大小减至 10K,然后在一个网页上加入 10 张,则该页的总大小将增大到 100K 以上,这可能会带来问题,除非您站点的所有访问者都有宽带连接。
在最佳条件下(实际上极少出现最佳条件),使用典型的 56 kbps 拨号调制解调器在浏览器中下载一个 100K 网页大约需要 15-20 秒时间,太长了。当页面加载时间超过 10 秒时,人们就会很快失去兴趣,转而访问其它站点。最大页大小(包括所有文字和图像)应在 50K 范围内(可以 56 kbps 速度在 7-10 秒内下载)。越小越好。
在您自己的计算机上或通过本地网络测试网页的加载时间绝不会提供真实的结果。只有 web 冲浪者体验到的时间才是真实的时间。在发布任何新网页之前,要从通过普通调制解调器链接到 web 的笔记本电脑或家庭计算机上查看它们。这样,您所见到的才是真正获得的结果。