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.
Always been a fan of FW. I could go into it more here, but I wrote an article a while back describing my experience, and why the two should not be directly compared: http://www.kevadamson.com/talking-of-design/article/stop-comparing-fireworks-with-photoshop
I read somewhere recently that when you save a file in Photoshop on a mac it puts some extra meta data in the file, but when you upload it to the web the extra data gets taken out. That could explain the difference in file size? Maybe fireworks doesnt put in any extra meta data in?
Your findings might be correct, but I doubt you will save 320MB in traffic. That might be true the first day after launching a new website, but like depi mentioned, I suppose most of your visitors have your images cached so it won’t make so much difference.
In fact, if you have changed your images now, after finding out FW does better compression, all your regular visitors will have to download them again, which will cause a peak in traffic that could take a long time to compensate by the couple of kB you have saved with the compression.
But still, when a new project with heavy graphics comes up, I will definitely check if FW does a better job than PS. Tnx for the tip. ;-)
I knew there was something fireworks make better… rsrsrsrs
Great topic…
Interesting…must be why I prefer using Fireworks. Besides the compression I think Fireworks is a much simpler interface to use.
As a web designer, I always work with FW since the first release.
During a webmeeting with an Adobe Engineer, he said to me that FW was built for compression, compression and compression (and today quick mockup).
Remember for the oldest ones! when we used 56K modem… and built 30Ko pages.
And keep in mind, FW must keep some assets against king PS.
Cool! Adobe is pretty good at that software stuff.
Haha, i like Marten’s point.
Some people i speak to assume that everyone also uses Photoshop to design all websites. It’s great for grungy and arty websites that use lots of layering and texture to get the final look, but just doesn’t compare to Fireworks when pixel perfect work is required.
I wish Fireworks was championed by more designers like in this post as i would like to see more articles and tutorials written for it.
Did you save for web use or save as…
I don’t use fireworks, however, along the lines of compression technology: Those looking to squeeze filesize for Flash projects—Save all your images as uncompressed PNG’s (whether it’s from Photoshop or Fireworks) and let Flash handle the “jpg compression” for optimizing. You will see some better results, visually and with file size.
Fireworks Rulz & Photoshop Droolz!
I love them both, but Fireworks is simply amazing when it comes to website design. You can quickly go to from wireframing ( using master pages and symbols), to interactive PDFs (client presentations) then using the same file start design over it! You can’t beat it.
Hi there! Well, great article this! I could never guess this but as a designer i always used both but for web layout and logos prefer Fireworks. Its funny, i always had this discussion with designers about Photoshop and Fireworks and its really impressive how people loves Photoshop! In some cases they even never had started Fireworks! Adobe off course have an easter eggs in their package! Well done!
ImageOptim for OS X will save you even more KB as it losslessly compresses PNG, GIF, and JPG. I always run my Fw exported images though other compressors since they can always be optimized more.
Fw is a fantastic app though, I’d be lost without it.
I think that you’re probably not comparing the same thing. Fireworks likely has better image compression defaults since there are lots of parameters you can use in JPG and PNG optimisation; in GIF too, the choice of the 256 colour palette can be optimised based on “perception” algorithms.
Plugins or separate packages to do JPG/PNG/GIF optimisation exist that can outdo both Fireworks and Photoshop no doubt… but there are so many options in the “save to web” of both packages that you cannot be sure that one or the other of the packages makes a real difference.
Photoshop “save to web” has one option which I have really noticed makes a difference: quality=50 is vastly different to quality=51 when you save. Above 50, the subsampling options change and you get a better result (with corresponding larger filesize).
Why not try this : save to JPG with Fireworks. Now save the same image from Photoshop, specifying to optimise for the same file size. Do the images look different? If so, the algorithm for optimisation is different…
IMO the best to compress PNGs efficiently is Yahoo’s Smushit : http://developer.yahoo.com/yslow/smushit/
Good article! I have followed your posts for quite a while and I really admire the quality of your work and content. I am surprised as well by how much people don’t use Fireworks, because, in my humble opinion, sometimes Photoshop is an overkill.
Don’t get me wrong, I still love them both!
Having said that optimization does make a difference, specially if a site gets a lot of traffic.
I’ve know for years that fireworks produces better quality files at lower file sizes. Fireworks faces two problems.
It duplicates so many photoshop features and doesn’t distinguish itself enough from Photoshop it is very hard to sell the cost of a extra program in business.
Boss:
Well. What does Fireworks do?
Me:
Edit image files and reduces website graphic file sizes better than Photoshop.
Boss:
Photoshop does that and we’ve already paid for it.
End of discussion.
The other problem is that it’s the devil you don’t know. With quick turn around times in the workplace and the fact there is no time to deal with any learning curve at all. You go with the one you know which is Photoshop.
Fireworks is an awesome program that has not gone away as I thought it would when Adobe bought Macromedia and for that I thank Adobe.
Yeah its real, also try jpg compression to 80% and you have 20 or 30 kbs of gain.
the module of photoshop (export fro web..) is very bad, i use it for my drawings and the file always exceed 100kb of grabage.
dont use the module
Cheers!!
Good point, I’ve been wondering for so long why they didn’t improve Photoshop’s image compression routines for years. I’ve been using jpegoptim and optipng for years, but finally I found ImageOptim which provides a comfortable GUI for these tools.
I’ve been using fireworks for 6 months and I luv it!