FireWorks直通车（三）—FireWorks实战之优化Web图像 林刚 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所示。