Fireworks优化网页图像详解

网页图像的诉求是在尽大概短的传输功夫里，颁布尽大概高品质的图像。所以在安排和处置网页图像时就诉求图像有尽大概高的明显度与尽大概小的尺寸，进而使图像的载入速率到达最快。为此，必需对图像举行优化。

在fireworks 中，一切的优化操纵都不妨运用“optimize”面板在处事情况市直接举行，优化树立仅用来输入图像。所以，用户不妨自在地对图像举行优化并安排其优化树立，而不用担忧会破坏原图。而且不妨经过预览各别的优化截止，随时按照须要对图像举行窜改。另一种简单赶快的优化本领是运用fireworks的“export preview”对话框在图像的导出时举行优化。

树立好优化输入参数后，即可依照所做树立输入关系文献了。其余为了不妨借助其余软硬件（如photoshop等）连接处置文书档案，用户也可将文书档案以选定其余方法（如psd等）输入。

领会了fireworks优化图片的本领，在其余的图像处置软硬件中，大师也能轻快控制图像优化的一致运用。

一、图像优化办法和计划采用

（一）运用优化面板树立图像优化的办法

1. 翻开一幅文献，并在图像编纂窗口中翻开preview、2-up或4-up选项卡。

2. 在“optimize”面板中采用文献方法，如图1所示，此时应按照文献典型采用各别的文献方法。比方，即使图中反复脸色地区较多的话，则适于运用gif方法，对于这种方法，可相映地运用“dither”(颤动)来积累因脸色缩小而形成的图像品质低沉。对于jpeg方法，可运用“smooth”(光滑)来使图像略微朦胧，进而减小图像巨细，普遍像片运用 jpeg方法大概更好少许。

图1 采用文献方法

3. 经过将图像脸色控制在一个一定的脸色集（如绘图板）控制脸色，而后简略图像中未用的脸色，进而缩小文献中运用的脸色数，文献的尺寸相映地也减小了。但脸色数太少会感化图像的品质，所以用户必需尝试一下百般绘图板的功效，再不在图像尺寸和品质之间寻得平稳。如图2所示。

图2 脸色树立

[page_break]（二）优化计划的采用、树立以及增加和删除

1. 采用内置优化计划

在optimize 顶部树立的setting下拉列表中，用户可采用体例内置的少许优化典型。

fireworks中供给了6种优化计划，各优化典型的意旨如次：

· gif web216：将一切脸色都变换为216种web安定色。

· gif websnap 256：将非web安定色变换为最逼近的web安定色，绘图板最多包括256种脸色。

· gif websnap 128：将非web安定色变换为最逼近的web安定色，绘图板最多包括128种脸色。

· gif adaptive 256：此时绘图板只包括图形中运用的本质脸色，而且绘图板最多包括256种脸色。

· jpeg-better quality ：树立品质为80、光滑度为0，此时图像品质较高，但文献尺寸也较大。

· jpeg-smaller file ：树立品质为60、光滑度为2，此时文书档案尺寸比jpeg- better quality缩小一半，但同声品质也将大幅度低沉。

* 即使运用gif或png方法，还应树立图像的通明脸色，fireworks mx 2004共供给了三种通明形式供采用：no transparency (不通明形式)，index transparency (索引色通明形式)和alpha transparency (alpha通明形式)，个中alpha通明为通道通明色。通明功效在firewoks mx 2004中以白色和灰色小方格相间的情势表白。如图3所示．

图3 树立通明色

在不通明形式中，图像中不决义的地域以底色弥补。

索引色形式指的是将绘图板的某些脸色树立为通明色，图像中一切那些脸色的像素点都被动作通明点导出。

提防：当图像中从来有这种通明脸色的功夫，有效的像素也被透鲜明示。

要变换通明色的树立，最大略的本领是运用优化面板左下方三支吸管东西，其功效如次：

· 在预览区单击即可增添通明脸色。

· 在预览区单击即可移除通明脸色。

· 在预览区单击即可采用通明脸色。

2.用户自设置优化树立

即使用户不满意于之上6种内置计划，不妨运用optimize面板中的百般优化选项举行更透彻的图像树立。

· 在optimize面板中的文献方法下拉列表框中采用须要的文献方法。

· 树立相映文献方法的简直化选项。

· 按照须要在优化面板的赶快菜单中采用其余的优化树立。

3. 生存和简略自设置优化计划

fireworks 供给了生存优化计划的功效，承诺用户将自设置的计划生存以备此后运用。在生存时，会将以次优化树立加以生存：

· optimize面板中的各项选项树立。

· color table（脸色表）面板中的绘图板。

· 用户在帧面板中采用的帧推迟树立。

用户可将自设置的优化计划生存为内置的计划。实行优化树立后，选中优化面板下拉列表中的save settings，不妨翻开如图所示的生存树立对话框，键入用户自设置的树立称呼，单击ok即可将自设置的优化计划生存起来, 如图 4 所示。

图4 生存优化树立对话框

即使不复须要某个优化计划，不妨在optimize面板的优化计划列表中采用要简略的计划，而后再面板的赶快菜单中采用delete setting（简略树立）吩咐即可将计划简略。

[page_break]二、优化gif和png图像

1. 树立绘图板、色度、颤动与色损

当采用gif与png8方法时，可采用绘图板，各绘图板的特性如次：

· adaptive：该绘图板是从一切脸色中索取的系列颜色，是被运用最多的绘图板，不妨运用最少的脸色实行较好的功效。

· websnap adaptive：是一种更高档的自符合绘图板，这种绘图板既统筹颜色的充分性又商量了欣赏器的兼容性，倡导用户运用这个绘图板。

· web 216：通用来windows与macintosh平台的216色彩色板。因为它能在百般8位表露平台的欣赏器中维持十分好的普遍性，所以是最保障的搜集图像绘图板。

· exact：包括图像中运用的透彻脸色。惟有当图像中的脸色小于256时，才可运用该绘图板。当图像所包括的脸色数胜过256时，它机动变换成“最适颜色”形式的绘图板。

· windows和macintosh：运用由windows体例或macintosh平台设置的规范256色。

· grayscale ：小于256灰度级的绘图板，将把图像变换成灰度图。

· black & white：由黑、白脸色构成的双色彩色板。

· uniform：鉴于rgb像素值的数学绘图板。

· custom：自设置绘图板。其基础实质可来自于规范绘图板或gif文献，用户可在此普通上对换色板举行窜改。其余，当用户变换过绘图板的那种脸色后，从来的形式会形成“custom”形式。

用户还可运用脸色编纂框树立色深，运用颤动编纂框树立颤动。对于gif方法，还不妨运用走样编纂框树立色损。该数值越大，文献尺寸越小，但图像品质越差，如图5所示。

图5 gif和png微调优化参数面板

2．树立反锯条脸色

单击optimize面板中的色版按钮可树立反锯条脸色，它经过将东西脸色与画布脸色搀和使东西看上去更光滑。为提防展示光晕，可使画布脸色与网页后台脸色相普遍，为东西减少反锯条功效，而后将画布树立为通明。

在fireworks mx 2004中，对于gif图像优化的选项，再有在优化面板的弹出菜单中树立gif的“interlaced”属性，其效率是不妨在欣赏器中实行边载入边表露的功效，如图5所示。

图 6 树立“interlaced”属性

三、优化jpeg图像

jpeg方法的优化树立面板如图7所示，用户不妨树立如图参数。

图7 jpeg的微调优化参数面板

1. jpeg的采用收缩

在fireworks mx 2004中保持了jpeg的采用收缩功效，它不妨对图像的各别地区采用各别的收缩比例，进而到达越发天性化的图像导出功效。比方，图像要害局部不妨高档别收缩，非要害局部（如后台）不妨初级别收缩，再不能在保护中心地区品质的基础下减小文献的尺寸。

（1）收缩jpeg图像的选定地区

简直办法如次：

· 在图像上运用采用地区东西画一个选区。

· 采用菜单“modify>>selective jpeg>>save selection as jpeg mask”，将采用生存为jpeg蒙版。

· 在优化面版中将输入方法树立为jpeg。

· 单击优化面板中采用性品德右侧按钮，翻开图8所示的可选jpeg树立对话框。

图8采用性jpeg收缩

· 选中“enable selective quality”复选框，并在文本框中键当选择地区所要设定的收缩比例。

· 采用“overlay color”（该脸色只用来预览，不必于输入）

· 选中“preserve text quality”复选框，表白一切文本将机动以高档别输入，而忽视简直的采用性收缩数值。

· 选中“preserve button quality”复选框，表白一切按钮标记将被机动以高档别输入。

· 单击“ok”按钮就不妨在预览窗口看到功效了。

（2）窜改采用jpeg收缩的地区

简直办法如次：

· 采用菜单“modify>>selective jpeg>>restore jpeg mask as selection”，将会展示一个选区。

· 用采用地区东西或其余东西对选区举行窜改。

· 再采用菜单“modify>>selective jpeg>>save selection as jpeg mask”。

· 要废除jpeg采用收缩不妨采用 “modify>>selective jpeg>>remove jpeg mask”。

2. 树立反锯条脸色

同样，对于jpeg方法而言，用户仍可运用色版按钮树立反锯条脸色。经过安排品德的数值，可安排jpeg图像的品质。该数值越大，图片品质越好，但图像尺寸也就越大。

3. 朦胧边境

经过树立优化面板中的光滑值，可遏制jpeg算法对锋利的脸色 边境做朦胧处置，进而减小文献尺寸。因为如许的边境在jpeg算法中不许实行很好的收缩，以是，较大的“smooth”参数值常常会减小导出图像文献的巨细。普遍情景该数值为3，既可减小文献尺寸也能保护图像的品质。在fireworks mx 2004中，再有两种jpeg优化参数，是在优化面板的弹出菜单中树立的，它们是“progressive jpeg”和“sharpen jpeg边际”。运用本领是单击优化面板右上角的按钮，会弹出一个下拉菜单，在弹出的菜单中采用相映参数，如图9所示。

若采用“progressive jpeg”参数，则该图像在欣赏器中表露功效将跟着图像载入过程的递加由朦胧突变为明显，有点一致交叉式gif。

若采用 “sharpen jpeg edges”参数，可更好地保持两种脸色之间的边境。所以，更加实用于输入带文本的文书档案。

图9 其余两个jpeg优化选项

提防：对于png24和png32方法而言，用户只能树立反锯条脸色。