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 used Fireworks for almost 2 years, but since I learned to work in PS, don’t use Fireworks anymore… Thanks for post!
An Eye opening article……
Hey, great post, but even as a fireworks fan I’ve got to call you up on your bandwidth savings maths. Your calculation would only be correct if none of your user’s don’t already have a cached version of the bg image – obviously I don’t know what your visitor loyalty/caching set up is like but I bet you get quite a bit of repeat traffic…
PS If your getting that kind of level of traffic you could probably reduce both your bandwidth & server load (by reducing http requests) by compressing/combining your css/js with something like minify (http://code.google.com/p/minify/)
YSlow (http://developer.yahoo.com/yslow/) for firebug can make finding optimisation routes really easy too.
Fireworks does rock though – also kicks Photoshops ass for vector stuff
hope this helps anyone trying to optimise their site out there….
now i know, that’s pretty helpful, thanks Nick!
Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.
Haha :-) more or less the same as everybody :-)
Really didn’t know… Nice article! Thanks!
Firewors was born to create site layouts. Photoshop for photo editing. That’s it. If you don’t need extraordinary effect on website layout ( and just 1% of designers need it ) you can create an efficient layout saving time. A lot of time.
I’m the only one in my company using fireworks and it’s quick, versatile and efficient.
@mattia: not really, Fireworks was born for creating web images of all kinds. It’s the only application I use for creating web graphics simply because it (well, used to before Adobe took over) loads quickly, has a much easier UI, and overall better at completing tasks when it comes to web design.
When you’re saving the files in Photoshop, are you using the Save for Web option? Photoshop generally puts a lot of meta-data in its images if you don’t – which may explain some of the image sizes.
You’ve highlighted one of the problems with Photoshop in your first example. There’s no such thing as 24 bit PNG with transparency. I don’t understand why the dropdown couldn’t just contain 24 bit or 32 bit as it does in Fireworks.
I’ve always suspected this but it’s nice to have it backed up by someone reputable.
Fireworks, while not as powerful, does have other tenets, it’ss also far quicker and easier IMO to mock up and change elements quickly in addition to dealing with slices in a far better way, pre sprites of course;-)
@James
In Photoshop, Save for Web will do this and also reduce the file size by removing all unneeded meta-data.
I’ve used Fireworks for optimising for a while now… I started using it to overcome transparent png not working in IE6 then realized the other optimisation was better than PS as well.
Side note you may or may not know;
If you export from FW as a PNG-8 with alpha transparency you’ll get the nice fade you expect from PNG-24 but it degrades to completely transparent in IE6, albeit a little chunky… (bah, it’s only IE6… update your browser, its free!) it means not having to replace png’s with gifs for IE6.
Also, thanks for the great resource.
I love Fireworks!
I’ve used fireworks since it was Macromedia. Compression and optimisation are just better. One area where it falls down, though is custom brushes. If I could readily get all my photoshop brushes into fireworks without a big headache then I’d probably not use PS for web work again.
well I can’t agree with your theory in this article. I also made this kind of test and in my opinion photoshop’s save-for-web option is much better. At least when it comes to JPEG. The images are noticeably sharper, and the file sizes are very similar to the ones saved in fireworks.. but once again… the image simply looks better.
You didn’t mention if you use just File/Save as.. option or save for web, so I can’t be 100% sure. But that’s just how I see this… Cheers
You could also use smush.it or PunyPNG to decrease the file sizes of your images without losing quality.
I ran a quick test with the background image using shush.it and managed to shave off ~7kb. That’s about 109mb saving per day.
Photoshop is made for editing photos not to design websites..
So use the right program for the right result!
Anyway… I love both of the programs ;)
Probably Fireworks optimize better than PS (it was so some year ago, may be now it’s the same)! But test and text about your background is a little questionable:
1. if you save for web with PS, generally jpg quality 50 may be a good quality for web image (now I’m out of my office and your bg is ok with PS6, file size 136 Kb; with PS CS3 may be better)
2. Many of your daily visitor are your affectionate estimators (me too) so they download your background only the first time…
Many thanks for your good job!!
well, for web FW is better except for one very disturbing issue: brushes.
the brush engine in photoshop is amazing, with the ability to create your own. FW sucks in that department. another great item of FW is the path palete and the pages ability. but overall PS is much more powerfull on almost every level.
in short, for web work (mostly) FW. since cs4 there is better integration between the 2 so this is the best workfllow for me.