《网页设计技术教程》第20章 图像的优化

第20章图像的优化 本章要点: 区图像优化的概念 区优化面板 区GIF、PNG和JPEG图像的优化

第20章 图像的优化 本章要点：  图像优化的概念  优化面板  GIF、PNG和JPEG图像的优化

20.1图像优化的概念 ●使用Web浏览器时,总是希望网页以尽可能快的速度 显示出来,因此在制作Web页图像时,应考虑如何在 尽可能短的传输时间里发布质量尽可能高的图像。为 了达到这一目的,就必须找到一种合适的图像优化方 案,使图像在经过优化后,文件尺寸尽可能小且图像 质量较高。 为进行图像优化,经常要使用【优化】面板,在优化 面板中对图像进行优化。调出【优化】面板的方法是 执行【窗口】→【优化】命令

20.1 图像优化的概念 ⚫ 使用Web浏览器时，总是希望网页以尽可能快的速度 显示出来，因此在制作Web页图像时，应考虑如何在 尽可能短的传输时间里发布质量尽可能高的图像。为 了达到这一目的，就必须找到一种合适的图像优化方 案，使图像在经过优化后，文件尺寸尽可能小且图像 质量较高。 ⚫ 为进行图像优化，经常要使用【优化】面板，在优化 面板中对图像进行优化。调出【优化】面板的方法是 执行【窗口】→【优化】命令

不同图像格式的比较 A5.BIP@50%(位图) 回囟 「原始预览2幅4幅 原始:A5.EMP GIF∝档,1)0%抖动 304.18K 17.96K 最适色彩 2秒58kbp 28颜色 JEG文档,组1)80品质 PKG文档,f1) 10 1秒56kbps 10秒@56kbps 4DM141「352x28250%

不同图像格式的比较

20.2不同格式文件的优化设置 ●20.21对GIF文件「优化 格式进行优化设置设置a换近网18+ GIF格式适合于|a N色版: 存放大块纯色的卡接近网页最合盾 通风格的图像或图 失真:0抖动:0 标、带有透明背景 不透明 的图像和动画。当 把图像文件格式设 置为GIF后,【优 化】面板形状如右 排序依据:无 ˇ□重建 g盛 6廿面

20.2 不同格式文件的优化设置 ⚫ 20.2.1 对GIF文件 格式进行优化设置 GIF格式适合于 存放大块纯色的卡 通风格的图像或图 标、带有透明背景 的图像和动画。当 把图像文件格式设 置为GIF后，【优 化】面板形状如右 图 :

2022对PNG文件格式进行优化设置 ●PNG格式有不同的色深可供选择,当用 户选择了一个较小色深的格式时(如: PNG8),参数的设置与GIF格式的参数 十分相似。但当色深增加到32位色时, 由于真彩色图形是不需要调色板的,所 以关于颜色的参数便消失了,实际上优 化只能改变底色这一图像属性。这时颜 色的再现是真实的,只是这时的图像 般不能支持透明效果

20.2.2 对PNG文件格式进行优化设置 ⚫ PNG格式有不同的色深可供选择，当用 户选择了一个较小色深的格式时（如： PNG8），参数的设置与GIF格式的参数 十分相似。但当色深增加到32位色时， 由于真彩色图形是不需要调色板的，所 以关于颜色的参数便消失了，实际上优 化只能改变底色这一图像属性。这时颜 色的再现是真实的，只是这时的图像一 般不能支持透明效果

2023对JPEG文件格式进行优化设置 ●1.一般优化 优化 打开JPEG文件 设置:EG-较高品质+ 或把文件设置为JPEG JPEG N色版 格式后,【优化】面 品质:80 板如图。单击【设置】 选择性品质:90 后面的列表框,可以 平滑:0 看到有两种预先设置 好的模式:【JPEG-较 高品质】和【JPEG较 小文件】,用户可以 排序依据:无 0色 选择任一种模式

20.2.3 对JPEG文件格式进行优化设置 ⚫1．一般优化 打开JPEG文件 或把文件设置为JPEG 格式后，【优化】面 板如图。单击【设置】 后面的列表框，可以 看到有两种预先设置 好的模式：【JPEG-较 高品质】和【JPEG-较 小文件】，用户可以 选择任一种模式

●2.选择性JPEG优化功能 ●选择性JPEG优化是 Fireworks mX的一个强 大功能,使用该功能用户可以对同一幅 JPEG图像的不同部分采用不同的JPEG压缩 级,比如用户对图像中的重要部分可以采用 高质量的压缩级,而对图像中无关紧要的部 分则可以采用低质量的压缩级,从而达到增 强主题的效果

⚫ 2．选择性JPEG优化功能 ⚫ 选择性JPEG优化是Fireworks MX的一个强 大功能，使用该功能用户可以对同一幅 JPEG图像的不同部分采用不同的JPEG压缩 级，比如用户对图像中的重要部分可以采用 高质量的压缩级，而对图像中无关紧要的部 分则可以采用低质量的压缩级，从而达到增 强主题的效果

!吧 原始照片 选中了孩子头像后的照片 将选中的区域保存为JPEG蒙板 图像经过选择性JPEG优化后的效果

原始照片 选中了孩子头像后的照片 将选中的区域保存为JPEG蒙板 图像经过选择性JPEG优化后的效果

小结 ●Web上的图像要求有尽可能小的尺寸,以 提高下载的速度,但缩小图像的尺寸可 能会带来图像质量的下降。本章介绍了 图像优化的概念以及 Fireworks mx对图 像进行优化的方法,着重介绍了对GIF NG和JPEG三种网络上最流行的图像文 件的优化方法

小结 ⚫ Web上的图像要求有尽可能小的尺寸，以 提高下载的速度，但缩小图像的尺寸可 能会带来图像质量的下降。本章介绍了 图像优化的概念以及Fireworks MX对图 像进行优化的方法，着重介绍了对GIF、 PNG和JPEG三种网络上最流行的图像文 件的优化方法