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’m a huge fan of fireworks and was dead scared it would be dropped from the roster when adobe took over. Its combination of bitmap and vector tools are unparalleled in the other cs sw. It is buggy – heck i can never quit it without it crashing, but which cs4 isn’t buggy? My biggest complaint is that its been slow to better integrate css previewing and it stumbles on high res images. We work in in print and web so we tend to have artworks in various formats – we use fireworks as a staging ground for most of our web related work even just to get assets into flash for example.
I never use FW. Over this past year, I’ve opened FW twice and that was by mistake. I’ll have to take another glace at it after reading this article.
Orrrrrr you could just use SuperPNG (free plugin), which compresses png a hell of a lot better than Photoshop could ever dream to, and doesn’t screw up the dimensions either. Ever try to load a Photoshop-saved png into Flash? Barf.
i don’t like Fireworks. Photoshop and Gimp are my best companions.
I only use Fireworks when I do webdesign. It’s truely useful. I think Fireworks is a kind of photoshop/illustrator program, I mean both at the same time but with 50% uses of each ones.
One advantage of Fireworks could be the use of ‘Pages/Frames’ for Slice comp groups (for multi-page templates of a website design), hence outputting from within a single psd/png master file. A feature that photoshop currently lacks.
Haven’t used fireworks enough to confirm this, but suspect it may be capable, can anyone confirm?
firework is best even for vector graphics and best for logo creation.
i’m a huge fan of fireworks,
I only use Fireworks when I do webdesign.
What citation(s) do you have for this statement?
Nice article
About the traffic calculations caused by the wallpaper, i think real world results would be not that dramatic because of the browser’s caching. (or is it really 16000 unique impression per day? :) But of course for high traffic sites, compression should be taken seriously with a proper quality/size/tools research.
I went through a fireworks phase when i first started out in web design. Its very good for web graphics, kind of similar to imageready (which for some reason wasnt as fun to get into). I think the drawing tools are slightly better in fireworks. And its a small app which takes up a lot less space than photoshop!
Yes – I’ve known this fact for years – It’s the compression algorithm to be more precise. It was designed to export web graphics from it’s creation. Photoshop was not. In fact, Photoshop’s compression algorithm used to be worse, a lot worse, then what your test results have shown.
Nice article.
Interesting article. Now that I’m used to Photoshop I don’t have much patience trying to use other software. Thanks for the information!
I do not open Fireworks as often as I should. I have been trying to remind myself more and more to use the software. It has some very handy features.
Everyone thinks that Fireworks is a tool for editing photos and export them to the web. I’ve been working professionally for many years with both programs, I never think about starting a web project with Photoshop. Fireworks exports HTML, JavaScript and CSS. If you stop to read your manual you will see that is a much more complex and useful tool. It is a hybrid between Photoshop, FreeHand or Illustrator and Rapid CSS. In fact compared to other program should be with Adobe Image Ready, and is unparalleled.
Sorry for my mistakes writing in English
Thanks so much. Good sharing :)
Ex-Buddy
Thank you so much!
neat, i will try with some of my images, see if I can save a bit of diskspace and bandwidth on my website
I have to say, I have used both Photoshop and Fireworks for 10 + years, actually since FW was released, and starting at about PS 3.
Slicing in FW is way quicker, and the user interface is much more user friendly. When it comes to Web mock-ups and interface design, I choose FW hands down, when it comes to photo manipulation, or batch processing, obviously PS is the best. FW also has a quick export function that lets you export your sliced mock-up as an index, at the same time it counts how many Button-objects you have and then creates respective pages for each,including a down-state nav image. So- once you can let go of the PS interface, you’ll be able to accomplish a lot more in less time with FW.
I find the 20kb difference reduction on your png example quite surprising, to my experience the filesize difference is much greater, I do not understand it myself but Fireworks is definitely the way to go, at least for me