FireWorks直通车(三)—FireWorks实战之优化Web图像

Author: 林刚 Date: 2000年 第21期

  作为一个划时代的Web图形制作软件,FireWorks中当然内置了高效的图像压缩功能。FireWorks中的图像优化工具支持现在流行的GIF、GIF动画、JPEG、PNG2、PNG24、PNG32、TIF、BMP、TGA等文件格式。
  下面,我就举一个例子,来说明如何将一张透明图片进行优化处理,并且为其加上背景色,使其与Web页面上的背景相符。
  1.首先,运行FireWorks,打开需要进行优化处理的图形文件,该图片带有透明背景我们以^21020601a^1为例。
  2.选择菜单“Windows/Optimize”,这时“Optimize”面板就会出现在编辑窗口的右边,“Optimize”面板中显示了优化选项。
  3.从文件格式下拉列表框中选择JPEG文件格式,如^21020601b^2所示(位于“Optimize”标签的正下方)。当用户选择JPEG文件格式时,“Matte”色彩设为白色,“Quality”设为80%,“Smoothing”设为0。
  4.单击视图窗口中左上方的“Preview”标签,默认JPG优化参数情况下的优化效果便显示在该窗口中,当用户改变优化参数时,优化效果会实时显示在“Preview”窗口中。
  5.用户通过改变“Optimize”属性窗口中的“Quality”值,可以调整图像的压缩程度。
  “Quality”值越高,压缩时图像损失的信息越少,图像就能够保证较高的品质与清晰度,但压缩后图像的容量较大,不利于在网页上使用;相反,“Quality”值越低,图像损失的信息越多,图像就能无法保证较高的品质与清晰度,但图像的压缩程度较高,容量较小,适合在网页上使用。通过不断地比较“Quality”设置,用户可以在文件容量、图像质量之间找到平衡点。
  6.用鼠标单击视图窗口左上方的2-UP标签,系统会并排显示出两个视图窗口,左边的窗口显示的是优化之前的源文件,而优化后的文件显示在右边窗口,如果用户未改变“Opmitize”参数时,右边窗口显示出的是使用默认的“Optimize”参数压缩后的图像。
  在视图窗口的下方,显示了图像的一些重要的信息,诸如:优化设置、文件大小、使用Modem所需要的下载时间等。下载时间能够作为一个衡量标准,帮助用户判断优化后的图像是否能够在最短的时间内从网上下载。
  7.用户可以比较优化前与优化后的图像,可以直观的看到优化前后图像质量的变化。如果优化后,通过比较用户发现图像质量并没有明显的降低,则可以通过适当降低“Quality”值,减少图像的容量,加快图像的下载速度。
  8.单击“Optimize”窗口左上方的4-UP标签,这时,系统会并排显示四个图像视窗,默认情况下,第一个视窗显示的是源文件,其他三个视窗显示的是应用了当前的优化方案的图像。但是,用户可以四个视窗分配不同的优化方案或者设置不同的优化参数。这样,用户可以很方便地对四种优化方案进行比较,以选择最佳的优化方案。Optimize属性窗口中也内置了许多优化方案,例如:GIF Web 216、GIF Wesnap 128、GIF Wesnap 256、GIF Adaptive 256、JPEG Better Quality、JPEG Small File等,如^21020601c^3所示。用户不必手动调整各种优化参数,只需要直接选择一种优化方案就能够快速地对图像进行优化处理。
  9.要对不同的窗口分配不同的优化参数,用户可以用鼠标选择设置优化参数的窗口,然后在右边的“Optimize”窗口中,用鼠标单击“Quality”对话框右边的小三角形,系统会显示一个滑动条,用户可以用鼠标上下拖拽滑动条就能够实时对图像进行压缩,改变图像的质量,降低图像的容量。在其他窗口,用户也可以用同样的方法设置不同的优化参数。用户通过比较文件大小、下载时间、图像质量来选择一种最佳的方案。例如:在“Quality”设置为10%的情况下,文件大小为4.9K,下载时间为1秒,但是这时的图像质量就很差,而如果将“Quality”设为40%,文件大小为10.65K,下载时间为3秒,在这种情况下,图像的大小和质量都可以接受。
  10.在对JPEG图像的压缩过程中,图像文件会显得很粗糙且会产生锯齿。用户可以对文件施加“Smoothing”操作,“Smoothing”与“Blurring”滤镜很类似,都能对图像的边缘进行模糊处理,使得图像的边缘与背景色过渡自然。正确的“Smoothing”操作还能够删除图像的一些信息,降低图像的容量,并能够加强图像的显示效果,但是过度的“Smoothing”操作则会影响图像的清晰度,因此在使用“Smoothing”时,要注意与源文件进行比较。
  11.在“Optimize”面板中,单击“Smoothing”对话框右边下拉菜单,用户可以选择“Smoothing”的强度,通常选择1或者2。用户可以在四个图像视窗选择不同的“Smoothing”值,进行对比,选出最佳的值。没有经过“Smoothing”处理,图像中会有明显的锯齿感,“Smoothing”的用处知道了吧。
  12.如果源图像包含透明像素,当该图片被压缩成JPEG图片时,由于JPEG文件格式不支持透明通道,因此透明像素会被Matte色彩填充。如果图片要用于具有背景色的Web页面,用户可以选择与Web页面背景相同的颜色作为“Matte”颜色,这样压缩后的图片就能够与背景完全融合,不过只有在Web背景为固定的单一色彩时,Matte才能有效果。如果用户要将透明图片置于背景为复杂图片的Web页面上,或者用户无法判断Web页面的背景色时,建议用户将图片压缩成支持透明通道的GIF格式。
  13.在“Optimize”控制面板中,用鼠标单击“Matte”对话框右边的三角形标签,系统会弹出一个“Matte”调色板,如^21020601d^4所示。(实际上是216色Web-safe调色板)。用户可以通过以下四种方式选择“Matte”颜色。其一,直接用鼠标从“Matte”调色板中选择一种适宜的颜色。其二,单击“Eyedropper”按钮,这时鼠标会变成吸管的形状,当鼠标在图像上移动时,吸管会自动获取所指位置的图像的“Hexadecimal”值,同时“Hexadecimal”数值会显示在“Hexadecimal”数值输入框中。其三,用鼠标单击“Color Picker”按钮,在弹出的对话框中用户可以从“Scroll List”中或者从“Color”列表中选择一种颜色,也可以直接输入颜色的色彩、饱和度、亮度值,或者RGB值。其四,用户可以直接在“Hexademical”输入框中输入“Hexademical”值。
  14.假设Web页面的背景色是蓝色的,要将一张背景透明的图片优化成JPEG格式后再嵌入该页面,就应该在“Matte”颜色设置对话框中将该图片的“Matte”颜色设置为蓝色,这样优化后的图片就能够与Web页面的背景相融合。
  15. FireWorks的“Optimize”工具还有许多隐藏的高级功能,单击“Optimize”属性对话框右上角的三角形标签,系统会弹出一个快捷菜单,如^21020601e^5所示,其中“Save Settings”命令能够让用户将自定义的优化选项存储成一个模板,列于优化模板列表中,以后用户要再对图像进行优化处理,就不必再一步一步重新设置,只要直接调用模板即可。“Delete Setings”命令允许用户删除FireWorks内置的优化模板或者是优化自定义的优化模板。“Optimize to Size”命令允许用户指定优化后图片的容量,系统会根据用户的要求,自动地选择最佳的优化方案对图片进行优化处理。“Export Wizard”命令提供了一个图像优化分析向导,它会根据用户的要求,自动为用户分析、选择图像的输出格式与优化方案,一步一步地指导用户应该如何对图像进行优化处理。“Remove Unused Colors”命令在能够保证图像质量的前提下,自动将图片中无用的色彩删除,减小图片的容量。“Progressive JPEG”命令能够使图片在Web页面上下载时,在初始阶段自动以低解析度显示图片,然后随着下载的进行,慢慢地增加图像的解析度,最后当图片完全下载后,在页面上以高解析度显示。这样能够让用户在等待图片下载完成过程中,对图片进行预览,在本例中,我们将该选择选中。“Sharpen Edeges”命令能够使图片边缘保持相对的清晰。“Sharpen Edeges”命令不宜和“Smoothing”命令同时使用,由于这两个命令的作用是截然相反的,因此同时使用会产生意想不到的结果。由于在前面我们已经对图片施加了“Smoothing”效果,因此就不宜再使用“Sharpen Edeges”命令。
  这样,经过FireWorks卓有成效的优化处理,图像已经从原来的35K减小为优化后的10.65K,如^21020601f^6所示。