第9章 图像的优化与导出
网页图像设计的最终目标是创建能够尽可能快地下载的优美图像。为此，必须在最大限度地保持图像品质的同时，选择压缩质量最高的文件格式即对图像进行优化、导出。本章主要讲述Fireworks
MX优化和导出图像的基本操作。
通过本章学习，应该掌握以下内容：
l
图像优化的基本方法
l
图像导出基本方法
1. 文件格式
每种文件格式都有不同的压缩颜色信息的方法。为某些类型的图像选择适当的格式可以大大减小文件大小。
2. 特定选项
每种图像文件格式都有一组唯一的选项。可以用诸如色阶这样的选项来减小文件大小。某些图像格式（如 GIF 和 JPEG）还具有控制图像压缩的选项。
3. 图像颜色（仅限于 8 位文件格式）
可以通过将图像局限于一个称为调色板的特定颜色集来限制颜色。然后，修剪掉调色板中未使用的颜色。调色板中的颜色越少意味着图像中的颜色也越少，使调色板图像文件类型的文件大小也越小。
应该尝试所有的优化控制来寻找图像品质和大小的最佳平衡点。
1. 使用优化面板
选择“窗口/优化”菜单，启动优化面板，如图9-1所示。
图9-1 优化面板
通过优化面板，可以很方便的在工作区内进行图像优化，并且同时看到优化后的效果。在优化面板上预先设置了几种优化设定可供选择，也可以按照自己的需要进行设定。
优化设置的操作过程为：
（1）在“设置”下拉表中选择文件格式。
（2）设置格式特定的选项，如色版、颜色和抖动。
（3）根据需要选择其它优化设置，并可以命名并保存自定义优化设置。
说明：导出文件格式的含义如下：
l
gif
网页 216：强制所有颜色为网页安全色。该调色板最多包含 216 种颜色
l
gif
接近网页 256：将非网页安全色转换为与其最接近的网页安全色。该调色板最多包含 256 种颜色。
l
gif
接近网页 128：将非网页安全色转换为与其最接近的网页安全色。该调色板最多包含 128 种颜色。
l
gif
最合适 256：是一个只包含图像中实际使用的颜色的调色板。该调色板最多包含 256 种颜色。
l
jpeg
－ 较高品质：将品质设为 80、平滑度设为 0，生成的图像品质较高但占用空间较大。
l
jpeg
－
较小文件：将品质设为 60、平滑度设为 2，生成的图像大小不到“较高品质 jpeg”的一半，但品质有所下降。
l
动画 gif 接近网页 128：将文件格式设为“gif
动画”并将非网页安全色转换为与其最接近的网页安全色。该调色板最多包含 128 种颜色。
2. 切片优化
可以对分割的图像的每一个切片进行不同的优化设定。比如，可以将图像上色彩丰富的部分设置为jpeg格式，色彩单一的部分设置为gif格式。
3. 优化效果预览
点击文档窗口上的“预览”标签，可以预览优化后的效果。点击“2幅”标签和“4幅”标签可以比较几种不同的优化设定所产生的效果。如图9-2所示。
图9-2 优化效果预览
4. JPEG选择压缩
JPEG选择压缩可以对图像的不同区域选择不同的压缩比率，在图像比较重要的部分可以选择较高的质量。不太重要的部分可以压缩的大一些。
操作过程如下：
（1）在图像上画一个选区。
（2）选择菜单“修改/ 选择性JPEG /将所选保存为JPEG蒙版”。
（3）选择菜单“修改/ 选择性JPEG /设置”。
（4）在弹出的窗口内勾选“启动选择性品质”
并且输入选择区域所要设定的压缩比率（数值越高，质量越好）。
（5）点击“确定”后，就可以在预览窗口内看到效果。
1. 选择“文件/保存”可以直接进行输出。
2. 选择“文件/另存为”也可以直接进行输出。
3. 选择“导出”输出图像，如图9-3。
1. 选择工具箱中“选择”工具区里的导出区域工具
，画出需要输出的区域范围。
2. 双击输出区域，跳出输出预览窗口，在输出预览窗口内可以调整图像输出的设置。
3. 最后按“输出”按钮就可以输出图像了。
将一幅大的图像使用切割工具分成一个个小的切片以后，就要把这些切片输出。
1. 选择“文件/导出”菜单，弹出如图9-3所示对话框。
图9-3 输出切片
2. 在“切片”选项栏下有几个选项：
l
无：忽略所有的切片对像，输出成当前格式的整幅图像。
l
导出切片：该默认的设置输出切片包括所有的行为设置。
l
沿引导线切片：输出切片，但忽略所有该对象的行为设置。
如果只输出选中的一个或几个切片，可以勾选下面的“仅已选切片”
可以将图像和动画输出为flash的swf格式
1. 选择“文件/导出”菜单，弹出设置对话框。
2. 选择保存类型下拉表中的
“Microsoft Flash Swf ”，点击“选项”按钮弹出如图9-4所示设置对话框，，对导出的动画进行设置。设置完成后保存导出文件。
图9-4 导出动画格式
如果对优化和导出网页图像不太熟悉，可以使用“导出向导”帮助完成这些工作。“导出向导”通过问题和建议逐步引导完成优化和导出过程，即使不了解优化和导出的细节，也可以轻松导出图像。
使用“导出向导”导出文档的过程如下：
(1) 选择“文件/导出向导”菜单 弹出如图9-5所示的设置对话框。
(2) 回答出现的任何问题，并在每个面板中单击“继续”。
说明：在第一个面板中选择“目标导出文件大小”，设定优化后的文件最大体积。
Fireworks
MX就文件格式提出建议。
(3) 单击“退出”。
“导出预览”窗口打开，其中显示建议的导出选项。
图9-4 导出向导
“导出预览”的预览区域所显示的文档或图像与导出时的完全相同，该区域还估计当前导出设置下的文件大小和下载时间，如图9-6所示。
图9-6 导出预览
可以用拆分视图比较各种设置，以便在保持可接受的品质级别的同时找到最小的文件大小。还可以用“优化到指定大小”向导限制文件大小。 当导出 GIF 动画或 JavaScript 变换图像时，预估的文件大小表示所有帧的总大小。
说明: 若要增加“导出预览”的重绘速度，请取消选择“预览”。若要在更改设置时停止预览区域的重绘，请按
Esc 键。
（4）设置完成后，单击“导出”按钮，导出优化后的图像。
网页图像以其直观、形象的表现特点在网页元素中占有重要地位。但图像文件的大数据量又常常成为网页的负担，影响了网页的下载速度。因此，对网页中图像进行优化即在不影响其质量的前提下尽量减少其体积是解决上述矛盾的有效途径。图像的优化一般从颜色、存储格式等方面进行考虑。具体采用的方式要根据具体要求确定。
1.
优化的方式有那几种？优化的目的是什么？
2．图像的输出方式有那些？具体如何操作。
