8位PNG在Fireworks8和PhotoshopCS2下导出的区别

这几天在工作过程中突然感觉用Fireworks8导出的8位PNG图片质量有问题(以前有一些图是用PhotoshopCS2直接导出的),随即用FW8与PS CS2针对PNG-8格式图片进行了导出效果对比。

=================(*^__^*)华丽地分割(*^__^*)===================

首先随便画了个一个用作测试的图片(为了效果明显,故使用连续渐变色),以下是无损颜色的PNG原始文件:

1.Fireworks 8:
把源文件放到FW8中,在右侧“优化”区域中,选择PNG-8格式,然后选择“精确”模式(PNG-8中的最高质量模式,相当于256色),其它默认,如图:

导出PNG-8,结果如下:

可以很清楚的看到,FW8导出的PNG-8图片上渐变有明显的棱角,效果不理想。
注:该文件大小为:810字节。

2.Photoshop CS2:
把源文件放到Photoshop CS2中,选“存储为WEB所用格式”,再选择“PNG-8 128仿色”,一切默认,如图:

导出PNG-8,结果如下:

可以看到,PS CS2导出的PNG-8图片没有棱角,效果理想。
注:该文件大小为:1.04KB。

为了方便大家对比,把这两张PNG-8放在一起,放放更健康(*^__^*)-------------------------------------:
FW's PNG-8(810字节):

PS' PNG-8(1.04KB):

=================(*^__^*)华丽地分割(*^__^*)===================

由此可见,对于8位PNG图片,Fireworks 8导出的要远差于Photoshop CS2(ImageReady引擎)所导出的质量。虽然FW的比PS的要小那么一点点(不到200字节),不过由于FW的压缩算法破坏PNG的程度比较高,显然并不可取。

由于机器上只安装这两种软件版本,不知道FW或PS其他版本会不会有这些问题(至少FW CS3应该不会再有这问题了吧- -),希望有能力的朋友告知。不得不承认,心爱的FW 8有很多缺陷……残念。

PS:刚才有个朋友和我说,一张图片节省200字节,那么如果很多图片呢,那就会节省很多的流量丫,用户下载速度会很快丫!
对于这种观点,我表示十分地不赞同和不理解。难道我们要通过图片质量的损失为代价来换取图片体积的节省么?不忠于设计原作,这是前端开发的大忌。多那一点文件大小换来高质量的几乎无损的图片质量,我认为性价比是超高的,这么做是值得的。(*^__^*)




[本日志由 SMbey0nd 于 2008-07-25 05:07 PM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: 前端开发 CSS 8位PNG
评论: 4 | 引用: 0 | 查看次数: -
SMbey0nd[2008-08-19 01:37 PM | del]
引用来自 onemax 引用来自 onemax
我用PS试了一下,同质量的淅变图片png比jpg要大很多

我不知道你是怎么对比的,用的什么类型的图片,图片又用的什么质量等级(“同质量”这个概念是怎么设定的?)。
不过我又经过再一次测试,得出如下数据(由PhotoShopCS2导出):

1.PNG
质量:PNG-8,256色
大小:1,634bytes


2.JPG
质量:高质量60%
大小:3,243bytes


======================
通过上例可以看出,JPG在“高质量”的时候,其大小接近PNG的两倍,而质量却明显不如PNG。由此而知,在做这种色彩非常饱满且适用于WEB的图形时,使用PNG是最好的选择。
onemax[2008-08-13 06:47 PM | del]
我用PS试了一下,同质量的淅变图片png比jpg要大很多
SMbey0nd[2008-07-29 10:51 PM | del]
引用来自 onemax 引用来自 onemax
不错~~~赞一个~~不过我对FW不怎么会用,一直用的PS。但了解总是好的,感谢分享!
如果肉眼看不出来的质量损失的话,小一点的图片当然好,如果像这种一样这么明显的话当然不行。

像这种渐变的图片貌似JPG是最理想的,质量又好体积又小。

这样的渐变图片我还是会选择PNG。
我觉得JPG最好还是用在照片类的图形上使用最恰当。像这种纯WEB用的图片,同等体积的PNG质量不会比JPG差。而且JPG是有损压缩的算法,一旦图像有失真,那种黑色马赛克实在是不好看。而PNG支持透明,灵活性自然更高,实用性扩展性更强一些,长期价值更高(另外,对文件类型的统一也有好处^^)。
我觉得对于图片的最佳选择是这样:

GIF-->用做GIF动画
JPG-->用作照片类写实图片(颜色特别丰富的)
PNG-->用作除上述外各种WEB图形

欢迎继续讨论~
onemax[2008-07-25 09:27 PM | del]
不错~~~赞一个~~不过我对FW不怎么会用,一直用的PS。但了解总是好的,感谢分享!
如果肉眼看不出来的质量损失的话,小一点的图片当然好,如果像这种一样这么明显的话当然不行。

像这种渐变的图片貌似JPG是最理想的,质量又好体积又小。
发表评论
昵 称:
密 码: 游客发言不需要密码.
内 容:
验证码: 验证码
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.