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 颜色设置

 (二)优化方案的选择、设置以及增删

  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(删除设置)命令即可将方案删除。

  二、优化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”属性

二、优化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”属性

时间: 2024-11-01 08:15:17

Fireworks优化网页图像的详解过程的相关文章

Fireworks优化网页图像详解

网页|详解|优化  网页图像的要求是在尽可能短的传输时间里,发布尽可能高质量的图像.因此在设计和处理网页图像时就要求图像有尽可能高的清晰度与尽可能小的尺寸,从而使图像的下载速度达到最快.为此,必须对图像进行优化. 在Fireworks 中,所有的优化操作都可以利用"Optimize"面板在工作环境中直接进行,优化设置仅用于输出图像.因此,用户可以自由地对图像进行优化并调整其优化设置,而不必担心会损坏原图.并且可以通过预览不同的优化结果,随时根据需要对图像进行修改.另一种简便快捷的优化方

3Ds Max教程:制作弩箭的详解过程

本教程是关于3Ds Max制作弩箭的详解过程,作者与大家分享了创作初衷,以及详细的介绍了弩箭模型制作的全过程,以及简单的渲染.从教程中可以看出作者制作效果的细致,希望能给网友带来更多帮助. 一.设计初衷 作者是一名工业设计系的学生,非常喜爱3D制作.由于看到一张图片,发现在现代部队中还在使用"弩"这种武器,不过感觉现在的弩有些像枪与弩的结合版.于是,上网查找古代"弩"的图片,并对它进行了一些改进,最终设计出大家所见到的这款弩箭.请看效果图: 效果图 二.模型制作过程

Fireworks网页切片应用详解

网页|详解 我们这里所说的切片(Slice)就是将一幅大图像分割为一些小的图像切片,然后在网页中通过没有间距和宽度的表格重新将这些小的图像没有缝隙的拼接起来,成为一幅完整的图像.这样做可以减低图像的大小,减少网页的下载时间,并且能创造交互的效果,如翻转图像等,还能将图像的一些区域用html来代替.Fireworks在网页切片制作方面有很强的优势,今天我们就来仔细看看Fireworks网页切片全攻略. 一.切片在网页制作中的作用 在网页上的图片较大的时候,浏览器下载整个图片的话需要花很长的时间,切

Javascript实例详解:网页拖放实现详解

文章简介:拖放的基本概念很简单:创建一个绝对定位的元素,使其可以用鼠标移动.这个技术源自一种叫做"鼠标拖尾"的经典网页技巧.鼠标拖尾是一个或者多个图片在页面上跟着鼠标指针移动. 拖放是一种非常流行的用户界面模式.它的概念很简单:点击某个对象,兵按住鼠标按钮不放,将鼠标移动到另一个区域,然后释放鼠标按钮讲对象"放"在这里.拖放功能也流行到了Web上,成为了一些更传统的配置界面的一种候选方案. 拖放的基本概念很简单:创建一个绝对定位的元素,使其可以用鼠标移动.这个技术源

shtml网页SSI使用详解

网页|详解 1.Config命令 Config命令主要用于修改SSI的默认设置.其中: Errmsg:设置默认错误信息.为了能够正常的返回用户设定的错误信息,在HTML文件中Errmsg参数必须被放置在其它SSI命令的前面,否则客户端只能显示默认的错误信息,而不是由用户设定的自定义信息. <!--#config errmsg="Error! Please email webmaster@mydomain.com -->  Timefmt:定义日期和时间的使用格式.Timefmt参数必

Fireworks动画类型及制作详解

详解 我一直认为FW比之PS强大的地方主要体现在两点上,一是向量图形编辑模式与位图编辑模式的完美整合, 二就是纯图形处理功能与GIF动画制作功能的整合.至于说在软件的使用简便性上的对比,我现在到觉得无益 探讨,盖因对于某一软件使用操作的得心应手完全取决于使用者的喜好.续论上述两个优势.图形模式混合处 理这一功能,ADOBE在PS6中以经引入,我们抛之不谈.就动画处理图形处理的整合上来说,PS比之FW仍有相 当距离.现在就让我们共同走进FW中来仔细了解一下FW在动画处理上的强大功能及其灵活简便,并

PHP抓取及分析网页的方法详解_php技巧

本文实例讲述了PHP抓取及分析网页的方法.分享给大家供大家参考,具体如下: 抓取和分析一个文件是非常简单的事.这个教程将通过一个例子带领你一步一步地去实现它.让我们开始吧! 首先,我首必须决定我们将抓取的URL地址.可以通过在脚本中设定或通过$QUERY_STRING传递.为了简单起见,让我们将变量直接设在脚本中. <?php $url = 'http://www.php.net'; ?> 第二步,我们抓取指定文件,并且通过file()函数将它存在一个数组里. <?php $url =

MySQL · 性能优化 · SQL错误用法详解

前言 MySQL在2016年仍然保持强劲的数据库流行度增长趋势.越来越多的客户将自己的应用建立在MySQL数据库之上,甚至是从Oracle迁移到MySQL上来.但也存在部分客户在使用MySQL数据库的过程中遇到一些比如响应时间慢,CPU打满等情况.阿里云RDS专家服务团队帮助云上客户解决过很多紧急问题.现将<ApsaraDB专家诊断报告>中出现的部分常见SQL问题总结如下,供大家参考. 常见SQL错误用法 1. LIMIT 语句 分页查询是最常用的场景之一,但也通常也是最容易出问题的地方.比如

新手织梦(dedecms)建站优化技巧教程步骤详解

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 一概惯例,先声明,本文适合新手站长,都是基础中的基础,各位根据自己的水平自己选择阅读与否,以免耽误大家宝贵时间. 所有这些操作只能保证你的网站适合蜘蛛爬取和索引,如果你指望完成这些就可以让你的排名飞起来的话那你也不要看下去了.网站优化贵在细心和坚持,没有捷径,至少我这里没有. 记得前面发表过一篇:<站长入门必备手册:终极分享史上最全&g