Surprisingly enough, based on the findings from my recent survey there are quite a bit of Fireworks users. Personally, I never used Fireworks. Photoshop is alway my first choice for designing—from image editing to designing mock-ups. But, did you know that Fireworks is way better than Photoshop in term of image compression? I'm not a software engineer, I can't explain why Fireworks can compress better. But I can prove it to you by showing a series of experiments I did.
Loading ...PNG Compression
For testing purpose, I used an un-compressed image with transparency. I used Photoshop to export the image to PNG-24 with transparency and the resulting file size is about 352 kb. Then I used the same image and exported it to PNG-32 with Fireworks. The file size is about 332 kb. Visually, they both look the same (at least to me). In term of file size, the image exported with Fireworks is about 20 kb less.
GIF Compression
Next I exported the image to GIF 256 colors, adaptive, with no dither. The results are: Fireworks = 88kb, Photoshop = 92kb. That is 4 kb less. Also, they don't look the same. I prefer the image exported with Fireworks because it has more image details.
JPG Compression
Now, I'm going to try the JPG compression with a different image. I exported the image with Photoshop to 60% quality JPG and the file size is 80 kb. Then I exported the same image with Fireworks to 80% quality JPG and the result is 72 kb. Both exported images look pretty much the same, but Fireworks beats Photoshop by 8 kb in this case.
Please note: Fireworks and Photoshop have different compression technology. 80% compression rate in Fireworks is relevant to Photoshop 60% compression rate.
What Is The Big Deal?
You're probably thinking: what is the big deal? It is only a few kilobytes... Well, don't under estimate the little difference in kilobytes, it can make a big difference on your bandwidth and load time. Lets use the background image on WebDesignerWall as an example. If I export the background with Fireworks, I can reduce its file size by 20 kb. I get about 16,000 visits per day on average. 20 kb x 16, 000 = 320, 000 kb. Yes, that is 320 megabytes per day! I'm only talking about the background image here. Could you imagine how much bandwidth I can save if I compress all the graphics on the site with Fireworks? Most importantly, I can make my site load faster and that is a big deal!
Conclusion
If you have Photoshop and Fireworks installed on your computer, try it yourself. You will be surpised with the results. From now on, I'm going to use Fireworks to export my web graphics, particularly the template graphics.
I don’t think fireworks is capable of doing what photoshop can. Although not a graphics designer myself, I have had problems with fireworks and photoshop compatibility and since then stopped using fireworks
Great post, Thanks!
Another reason to switch from PS to FW :)
Great article
According to the latest info photoshop CS5 will be a massive advancement in this area of compression
See the CS5 features on a video on the main web site
http://www.photoshopcs5.co.uk/technology.htm
very good, I like FW ,more
a boy from china
Interesting stuff… Seams Fireworks may be the eventual winner for web dev. Makes sense to me! :)
Have known this for years, thanks for the testing. People often look at me sideways when I mention it. Prefer Photoshop for design then Fireworks to compress.
I have been using fireworks since it was macromedia-still using their pro version and love it for design, layout and compression…however…photoshop seems to port to printer better and is faster working with larger files. I use both depending on content and end product
Ever heard about “PNG-Optimizer” ? For free and the same results ;)
I am surprised by that actually. I would have though Photoshop would have done a better job.
I might have to try this myself to actually believe it.
Well, it’s a big deal when you really can save a few KB but on the other hand, I’m not a fan of FW. It doesn’t work the way it is like PS though. I think it’s depends on the designer. Maybe I just need to get use to the FW. *shrug*
I’ve been using Fireworks for 8 years now, I wouldn’t use any other program for web design or any digital design jobs for that matter (PS for print only). I don’t know where to start; the vector tools? Cut and paste any object(s), anywhere? Paste attributes? Frames output to images? Real boolean tools? Simple, easy to use toolbar? Slicing that blows Photoshop away? Better compression? More dynamic effects (including filters) that are changeable at any time? No massive “mask” layers that make my layers palette 3 ft long (you can do anything Photoshop can do with masks)?
Basically you can’t beat it for speed and layout. Photoshop has a few more “painterly” tools but that’s it. BTW I was an 8 year Photoshop user before I started using Fireworks – give it a try, you won’t be sorry.
…additionally, try to put aside your love for any program when you experiment, I loved PS, and I was skeptical at first, but I got over my Photoshop, Illustrator, Quark complex pretty quickly. Photoshop and Illustrator have real issues with user tools – they’re based on print-based code that is now decades old and you can see how they retrofit their tools with every “upgrade”.
我一直在使用FW，我个人感觉PNG的话FW会方便很多
hmss
nice :)
I’ve always suspected this but never thought to do an experiment like what you did. Thank you for saving me the trouble of confirming this! I’ll try studying Fireworks more from now on.
Great article!
I’d say more experienced designers tend to lean towards photoshop.
It simply does alot more…
oo thanks :)
Started of and learned FW before PS, it´s great if you need to do things fast, for more complex graphics I find that PS is better even if it takes a bit more time to work with…
first of all, I can clearly say that compression results are not true as it seems. We had made a little research about that with our team and yes FW’s results “seem” less than PS but image quality is not same.
secondly, I CAN NOT USE FW. FW is definitely a stepchild of Adobe. The CS4 version has incredibly bugs that makes me crazy especially on text objects.
I can not say anything more about FW I srtongly need like that software but I just can’t believe its stuation today.
Make sure… before you pass off a design to the CSS/HTML Jedi master… that they know the difference. This is a great article. Just send them the link. If they don’t read it then reveal your lightsaber hidden behind your belt.