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 mainly use Photoshop but I have always been disappointed and frustrated with the PNG export.
to Laurence: photoshop can work with both. is called import you can place both type of files in vector or in pixel format it gives you the options to do that.
Is this with the Photoshop “save for web and devices”, or just by clicking ‘save’?
Very interesting. I tested this myself with PS CS3 (save for web) and FW CS3 (optimize). A photo saved with the same JPEG compression settings resulted in: PS JPEG = 291k, FW JPEG = 142k. Doing the same for GIF was the opposite (although this image isn’t a good gif candidate, few flat colors): PS GIF = 288k, FW GIF = 306k.
Work is not different. Based on competency of users.
I use Photoshop to Fireworks to design and optimize, for me, the best option;)
I use Photoshop to design and Fireworks to optimize, for me, the best option ;)
I use fireworks because it’s easy to use, and useful for PNG outputs.
I used FW some moths and I love it very much, I hope have more FW tutorial in design web. It’s useful for beginner.
What if you Export your images for web on Photoshop??, Im pretty sure they’ll be smaller than Fireworks images but I dont know about image quality hmmm….
Work is not different. Based on competency of users.
I was a Photoshop user until I find Fireworks. Now I use Fireworks for all my website graphics purpose. I use Photoshop for photo editing only :)
Gotta agree, Fireworks is number 1 for export.
The 8bit png export is great for reducing file-size, i got my main nav sprite from 54k to 17k with no loss in quality.
I don’t use photoshop
Yes this is true. Im using Photoshop and Fireworks.
Yes This is true I Agree. I use Photoshop and Fireworks
Design for Photoshop, Optimize for Fireworks
Best Option for Designers:)
love both…
Wow is this new in CS2? I remember trying the different compression methods a few years ago and picked PS… now I’ll have to go back and give Fireworks another look.
Thanks for the heads up!
I’ve been a FW user since v1.0, and Photoshop since 2.0. Fireworks has always been the better web layout and slice maker, handily beating ImageReady. And the better image compression has been a secret feature for some reason since v1.0 going back to about 98. Now I use FW for iPhone apps. Pixel level precision, reusable symbols, and pages – nuff said right there!
Yeah, I’ve always used both. Especially for web design. I usually export a PNG-24 from photoshop, then open it in fireworks and (in most cases) save it as a PNG-8 in Fireworks with Adaptive Transparency, and the final filesize is reduced massively.
This works really well for items with drop shadows with a low/medium opacity