Fireworks优化网页图像详解(三)

二、优化GIF和PNG图像

1. 设置调色板、色度、抖动与色损
当选择GIF与PNG8格式时，可选择调色板，各调色板的特点如下：
· Adaptive：该调色板是从所有颜色中提取的系列色彩，是被使用最多的调色板，可以使用最少的颜色实现较好的效果。
, U3 f" e8 h) w/ V9 W· WebSnap Adaptive：是一种更高级的自适应调色板，这种调色板既兼顾色彩的丰富性又考虑了浏览器的兼容性，建议用户使用这个调色板。
· Web 216：通用于Windows与Macintosh平台的216色调色板。由于它能在各种8位显示平台的浏览器中保持相当好的一致性，因此是最保险的网络图像调色板。
0 T4 @3 g* l6 j  }8 d) ]' K1 o· Exact：包含图像中使用的精确颜色。只有当图像中的颜色小于256时，才可使用该调色板。当图像所包含的颜色数超过256时，它自动转换成“最适色彩”模式的调色板。
2 `+ X9 F3 V; G- g" l, Q6 b* W8 }# B· Windows和Macintosh：使用由Windows系统或Macintosh平台定义的标准256色。
# u/ O! _' B0 o4 A· Grayscale ：小于256灰度级的调色板，将把图像转换成灰度图。
: [5 O5 p( \) G5 c+ J8 Q" Y· Black & White：由黑、白颜色组成的双色调色板。
0 V! W. T: D/ t; U' @9 Q· Uniform：基于RGB像素值的数学调色板。
# F9 d% E. S9 N2 l( `* _, x% C· Custom：自定义调色板。其基本内容可来自于标准调色板或GIF文件，用户可在此基础上对调色板进行修改。另外，当用户改变过调色板的某种颜色后，原来的模式会变成“Custom”模式。
用户还可利用颜色编辑框设置色深，利用抖动编辑框设置抖动。对于GIF格式，还可以利用失真编辑框设置色损。该数值越大，文件尺寸越小，但图像质量越差，如图5所示。
- A/ e$ P7 C/ U: @+ V6 V& j
* N; g2 E& W) N# ?( a' V
$ O6 {/ s0 ~4 H$ i7 I
2 S/ V) s  x9 y; T9 a0 e; \% l

# T7 `$ Q) i. [5 p


: ~5 ~* X. t; K! v! s3 `6 N4 I图5 GIF和PNG微调优化参数面板
2．设置反锯齿颜色
单击Optimize面板中的色版按钮可设置反锯齿颜色，它通过将对象颜色与画布颜色混合使对象看起来更平滑。为防止出现光晕，可使画布颜色与网页背景颜色相一致，为对象增加反锯齿效果，然后将画布设置为透明。
在Fireworks MX 2004中，关于GIF图像优化的选项，还有在优化面板的弹出菜单中设置GIF的“Interlaced”属性，其作用是可以在浏览器中实现边下载边显示的效果，如图5所示。


( r+ J' g. E, Q) o6 ^

- V; o& ]4 r# i0 [2 g6 N! h' R" `
图 6 设置“Interlaced”属性
% F6 d( _" X" K; I9 I7 E4 P4 [三、优化JPEG图像
JPEG格式的优化设置面板如图7所示，用户可以设置如图参数。
" x$ G4 y: r* X7 n9 I: w2 P
( }0 l7 S4 {- s: e
3 v/ e# q0 B- K% m* R
8 k+ Q) d% ~( H9 P  u

( ^7 q' b5 H2 Z) \图7 JPEG的微调优化参数面板
9 K6 t* n, Q0 U1 t7 n1. JPEG的选择压缩
% M+ L& F  _$ p& Q在Fireworks MX 2004中保留了JPEG的选择压缩功能，它可以对图像的不同区域选择不同的压缩比率，从而达到更加个性化的图像导出效果。例如，图像重要部分可以高级别压缩，非重要部分（如背景）可以低级别压缩，以便能在保证重点区域质量的前提下减小文件的尺寸。
（1）压缩JPEG图像的选定区域
: h* V7 s% u% `9 Y具体步骤如下：
6 o. X% {) h3 |) Y$ w# w9 {* o& T· 在图像上使用选择区域工具画一个选区。
# }/ U! }! Q* |9 y· 选择菜单“Modify>>Selective JPEG>>Save Selection as JPEG Mask”，将选取保存为JPEG蒙版。
· 在优化面版中将输出格式设置为JPEG。
. a3 s" O% P% ?8 S$ T· 单击优化面板中选择性品质右侧
2 V0 O, c8 L, O/ c
1 a! s  F4 a8 g& q按钮，打开图8所示的可选JPEG设置对话框。
" v) b0 D/ b. G: R( D; }

+ H7 d) z1 L( h7 u; s2 C! B
# g5 X) v7 {; R. j8 e* |
图8选择性JPEG压缩
· 选中“Enable selective quality”复选框，并在文本框中键入选择区域所要设定的压缩比率。
4 {5 k# U# s! F· 选择“Overlay color”（该颜色只用于预览，不用于输出）
· 选中“Preserve text quality”复选框，表示所有文本将自动以高级别输出，而忽略具体的选择性压缩数值。
5 t- r- c8 J$ o; c  n· 选中“Preserve button quality”复选框，表示所有按钮符号将被自动以高级别输出。
· 单击“OK”按钮就可以在预览窗口看到效果了。
0 V# c" c- N; _% S) c" p+ M（2）修改选择JPEG压缩的区域
0 }. j% F, {" J* Y3 k. ]5 P4 D具体步骤如下：
· 选择菜单“Modify>>Selective JPEG>>Restore JPEG Mask as Selection”，将会出现一个选区。
  j. T% v! w$ Q5 I+ R· 用选择区域工具或其他工具对选区进行修改。
· 再选择菜单“Modify>>Selective JPEG>>Save Selection as JPEG Mask”。
· 要取消JPEG选择压缩可以选择 “Modify>>Selective JPEG>>Remove JPEG Mask”。
2. 设置反锯齿颜色
同样，对于JPEG格式而言，用户仍可利用色版按钮设置反锯齿颜色。通过调整品质的数值，可调整JPEG图像的质量。该数值越大，图片质量越好，但图像尺寸也就越大。
7 z, h' K: k* F  F; e! j- t3. 模糊边界
通过设置优化面板中的平滑值，可控制JPEG算法对尖锐的颜色 边界做模糊处理，从而减小文件尺寸。由于这样的边界在JPEG算法中不能实现很好的压缩，所以，较大的“Smooth”参数值通常会减小导出图像文件的大小。一般情况该数值为3，既可减小文件尺寸也能保证图像的质量。在Fireworks MX 2004中，还有两种JPEG优化参数，是在优化面板的弹出菜单中设置的，它们是“Progressive JPEG”和“Sharpen JPEG边缘”。使用方法是单击优化面板右上角的
" [# j* p/ i3 s3 y
2 h# Y7 m+ f: {# v9 n* A- C按钮，会弹出一个下拉菜单，在弹出的菜单中选择相应参数，如图9所示。
: d$ V' Y* g% G% {5 }" M3 A/ a若选择“Progressive JPEG”参数，则该图像在浏览器中显示效果将随着图像下载进程的递增由模糊渐变为清晰，有点类似交错式GIF。
  E1 v1 a/ g+ U若选择 “Sharpen JPEG Edges”参数，可更好地保留两种颜色之间的边界。因此，特别适用于输出带文本的文档。

9 G1 c% l, ~3 C

1 m. {# w# ~1 |0 z9 Q( f. a0 l
图9 另外两个JPEG优化选项
注意：对于PNG24和PNG32格式而言，用户只能设置反锯齿颜色。