网页投计与制作教程 第10章图像的优化与导出 FIREWO FLASHP DREA
第10章 图像的优化与导出
网页设计与制作敦程 第10章 图像的优化与导出 本章目录 在浏览速度与页 ○面美观之间取得平衡 必10.1图像的优化处理操作 是网页设计师的最大 任务。这种平衡行为 必10.2图像的导出操作 就是优化。 Fireworks8在 10.3切片的优化和导出 ○优化图像方面有着近 乎完美的表现，可以 必10.4本章小结 将图像根据要以GIF 或者JPG格式输出， 并可以轻松地定义压 缩比率，在进行设置 ○的同时就可以输出图 片的大小既要说明
第10章 图像的优化与导出 ❖10.1 图像的优化处理操作 ❖10.2 图像的导出操作 ❖10.3 切片的优化和导出 ❖10.4 本章小结 在浏览速度与页 面美观之间取得平衡 是网页设计师的最大 任务。这种平衡行为 就是优化。 Fireworks 8 在 优化图像方面有着近 乎完美的表现，可以 将图像根据要以GIF 或者JPG格式输出， 并可以轻松地定义压 缩比率，在进行设置 的同时就可以输出图 片的大小
网页设计与制作教程 10.1图像的优化处理操作 1.调整图像颜色 Fireworks可以通过调色板的特定颜色集来限制 图像的颜色。 2.选择最佳文件格式 通过为图像文件选择适当的格式来大大减小文件 大小。 3.设置格式特定的选项 通过设置不同的选项，如色阶这样的选项等，来 减小文件的大小
10.1 图像的优化处理操作 1．调整图像颜色 Fireworks可以通过调色板的特定颜色集来限制 图像的颜色。 2．选择最佳文件格式 通过为图像文件选择适当的格式来大大减小文件 大小。 3．设置格式特定的选项 通过设置不同的选项，如色阶这样的选项等，来 减小文件的大小
网页设计与制作敦程 10.1图像的优化处理操作 10.1.1对G1F格式图像进行优化处理 (1)使用Fireworks8打开一幅图片，在图片的下 方可以看到关于此图片的基本信息。 (2)在“优化”面板中可以看出此图片的格式。也 可以通过【窗口】|【优化】菜单命令，打开“优化” 面板。 (3)在“设置”下拉列表中可选择Fireworks8预 先设置的几种优化设置对图像进行优化。 (4)选择“GIF接近网页256”即代表将图像处理为只 包含256种网页安全色的GIF格式文件
10.1 图像的优化处理操作 （1）使用Fireworks 8打开一幅图片，在图片的下 方可以看到关于此图片的基本信息。 （2）在“优化”面板中可以看出此图片的格式。也 可以通过【窗口】|【优化】菜单命令，打开“优化” 面板。 （3）在“设置”下拉列表中可选择Fireworks 8预 先设置的几种优化设置对图像进行优化。 （4）选择“GIF接近网页256”即代表将图像处理为只 包含256种网页安全色的GIF格式文件。 10.1.1 对GIF格式图像进行优化处理
网页设计与制作教程 10.1图像的优化处理操作 10.1.1对G1F格式图像进行优化处理 (5)为了使获得的文件更小，还可以在“优化”面 板中的“颜色”下拉列表中选择想要的颜色数。 (6)通过设置GIF文件的“失真”值，也可以使文件 变得更小。较高的失真设置可以产生较小的文件，但是 图像品质较低。5~15的失真设置通常可以产生最佳的 效果。 (7)通过设置“抖动”值，可使图像抖动。抖动可 通过替换颜色相似的像素模拟当前调色板中没有的颜色。 从远处看，各颜色混合在一起，产生缺失颜色的外观
10.1 图像的优化处理操作 （5）为了使获得的文件更小，还可以在“优化”面 板中的“颜色” 下拉列表中选择想要的颜色数。 （6）通过设置GIF文件的“失真”值，也可以使文件 变得更小。较高的失真设置可以产生较小的文件，但是 图像品质较低。5～15的失真设置通常可以产生最佳的 效果。 （7）通过设置“抖动”值，可使图像抖动。抖动可 通过替换颜色相似的像素模拟当前调色板中没有的颜色。 从远处看，各颜色混合在一起，产生缺失颜色的外观。 10.1.1 对GIF格式图像进行优化处理
网页设计与制作敦程 10.1图像的优化处理操作 10.1.2对JPG格式图像进行优化处理 (1)使用Fireworks8打开一幅JPG格式的图片。在 图片“优化”面板可以看到关于此图片的基本信息。 (2)单击“优化”面板中的“设置”下拉列表，选 择Fireworks8预先设置的图片压缩方式，选择 “JPEG-较小文件”选项，可以看到“JPEG-较小文件” 选项的详细设置。 (3)在“优化”面板中可以设置“平滑”值，帮助 缩小JPEG文件的大小。将“平滑”值设置为3左右，不 仅可以减少图像的大小，同时还可以保持适当的品质
10.1 图像的优化处理操作 （1）使用Fireworks 8打开一幅JPG格式的图片。在 图片“优化”面板可以看到关于此图片的基本信息。 （2）单击“优化”面板中的“设置”下拉列表，选 择 Fireworks 8 预 先 设 置 的 图 片 压 缩 方 式 ， 选 择 “JPEG-较小文件”选项，可以看到“JPEG-较小文件” 选项的详细设置。 （3）在“优化” 面板中可以设置“平滑”值，帮助 缩小JPEG文件的大小。将“平滑”值设置为3左右，不 仅可以减少图像的大小，同时还可以保持适当的品质。 10.1.2 对JPG格式图像进行优化处理
网页设计与制作敦程 10.1图像的优化处理操作 10.1.2对JPG格式图像进行优化处理 (4)如果用户对图片的文件尺寸要求很高，例如 文件不得大于56Kb,那么可以使用“优化到指定大小” 功能。选择“优化”面板右上角的【选项】|【优化到 指定大小】菜单命令，打开“优化到指定大小”对话 框，在“目标大小”文本框中输入需要的文件大小， 单击“确定”按钮就可以将图片压缩到指定大小。 (5)如果经常需要对某一类型图片进行相似的处 理，可以将优化设置保存下来，今后只需要直接调用 就可以了
10.1 图像的优化处理操作 （4）如果用户对图片的文件尺寸要求很高，例如 文件不得大于56Kb，那么可以使用“优化到指定大小” 功能。选择“优化”面板右上角的【选项】|【优化到 指定大小】菜单命令，打开 “优化到指定大小”对话 框，在“目标大小”文本框中输入需要的文件大小， 单击“确定” 按钮就可以将图片压缩到指定大小。 （5）如果经常需要对某一类型图片进行相似的处 理，可以将优化设置保存下来，今后只需要直接调用 就可以了。 10.1.2 对JPG格式图像进行优化处理
冈页设计与制作 敦程 10.2图像的导出操作 10.2.1导出文档 (1)在“优化”面板中选择要用于导出的文件格 式，然后根据需要设定格式的选项。 (2)执行【文件】【导出】命令，或者在【主 要】工具栏上单击“导出”按徊，即可打开“导 出”对话框，如图10-18所示
10.2 图像的导出操作 （1）在“优化”面板中选择要用于导出的文件格 式，然后根据需要设定格式的选项。 （2）执行【文件】|【导出】命令，或者在【主 要】工具栏上单击“导出”按钮 ，即可打开“导 出”对话框，如图10-18所示。 10.2.1 导出文档
网页设计与制作教程 10.2图像的导出操作 10.2.1导出文档 出 保存在D:回y1ctr 习中由心图 4. mouse.pg 222 3725134410 3.1pa t12.0f 文件名D 1188347-8hijes9kffen5tgtindsna416tbbrl 保存) 保存类型)：仅图慢 取消 HTMD: 切片0： 厂仅已选切片但 反位括无片区 图10-18“导出”对话框
10.2 图像的导出操作 10.2.1 导出文档
内页设计与制作敦程 10.2图像的导出操作 10.2.1导出文档 (3)选择图像文件导出的保存位置。对于网页图 形来说，最佳位置通常是本地网站内的一个文件夹。 (4)输入文件名。不需要输入文件扩展名， Fireworks会在导出时使用在优化设置中指定的文件 类型确定文件扩展名。从“导出”选项的下拉式菜单 中选择“仅图像”。 (5)最后单击“导出”按钮，完成导出操作
10.2 图像的导出操作 （3）选择图像文件导出的保存位置。对于网页图 形来说，最佳位置通常是本地网站内的一个文件夹。 （4 ）输入文件名。 不需要输入文 件扩展名 ， Fireworks 会在导出时使用在优化设置中指定的文件 类型确定文件扩展名。从“导出”选项的下拉式菜单 中选择“仅图像” 。 （5）最后单击“导出”按钮，完成导出操作。 10.2.1 导出文档