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.
Great review. Hadn’t even thought about using anything but Photoshop. Thanks a lot!
This is really strange. When CS3 first came out – I attended an Adobe Roadshow and I am pretty sure they said that the new Photoshop CS3 was going to use the same compression engine as Fireworks. So I assumed the performance would be the same.
That’s disappointing.
Really useful article, I found both Photoshop and Fireworks easy to use but our students mostly want to learn Photoshop, hence we go with PS.
Actually image compression is the only reason why i use fireworks. I dont like the interface at all, but the compression rates and quality are quite impressing. Additionaly i use ImageOptim (http://pornel.net/imageoptim/en), a small piece of OsX Software which gets rid of some extra info in image files, to get even smaller png files.
I already remarked that some years ago using the Macromedia Studio 8 (!) and i retested it when i installed my CS3 in comparison to the older Fireworks. Since then i always prefer Fireworks for slicing and final preparations for web.
I also recognized the difference between the two tools and now I also slice my design with fireworks. After that I try to compress the image again with yslow and SmushIT…That’s a really great tool
Fireworks designers darling …where as…Photoshop photographers babe :)…so choose ur role!
Photoshop is what I learnt to use first and I loved it. When I started work experience early this year in a web design office I was made use Fireworks as that was all the boss knew in the office and he was always against change.
I hated it at first because I was so use to PS but after a while I got to know it well enough but it still held me back in terms of the finished design as I was limited to what I could do.
Now what i do is create the whole design in Photoshop and once the final draft is approved I import the PSD in Fireworks and save it as a PNG and slice that file. I prefer Fireworks for slicing as it is much quicker and simpler in my opinion. I never tested the files sizes compared to PS though, some good savings in this example.
I have been using Fireworks for 5 years, … its recieved heaps amount of snobbery, by people who cannot value its “Half Vector half Bitmap Approach” …. snobby people need to wake up to Fireworks.
Nice article. Although, I think the size difference of web ready output is important, it is just icing on the cake. Fireworks is under appreciated and is SO much better than Photoshop for web design work. I think the only reason people still use Photoshop is because they haven’t tried Fireworks.
As a Web-Designer/Graphic Designer, I started out using JASC Paint Shop Pro and eventually migrated to Photoshop. FireWorks came Highly-Recommended by other web-designers and when I switched, I was hooked and never-looked-back! The interface is very intuitive and the exporting tool is a God-Send!
Yeah I was at the Adobe Roadshow conference. The speaker made this a major point of discussion. Telling everyone to stop using Photoshop to export web graphics and start using Fireworks. You’ll really notice a much more substantial saving when you’re working with photos over illustrations too.
When asked why the exporter wasn’t in Photoshop – his response was a standard “it’s harder than you think – we’re working on it”
Funny, I just started to try and force myself to use Fireworks instead of Photoshop last week for other reasons, but this might be enough to do it permanently.
Yeah, I just started using FW myself. I love it!
I think the morale of the story is: Buying Macromedia was the best decision Adobe could ever make.
FW ruled webdesign long before “Web 2.0″, the “blogosphere” and “user generated” were even part of the project. Got to respect that!
I always knew that many people utilized FW for effective web layouts, but I didn’t know that the program was capable of better compression. I know that you have posted tutorials on PS and AI..maybe you should include FW in that list now?
I always love your tutorials. You have a wonderful eye for design.
excuse my english … Not only is the compression, I use FW from early vrs. It is much faster and intuitive and the PNG files as base format are much lighter than PS files, even being able to match many of the effects and attributes of the PS, of course all this applied to the design, PS is an excellent tool for retouching images and photos, but not so good for design, for my experience, moreover, FW can handle pages, managing the design of a site in one master file, inclusive, a file more lighter than a PS full of layers and groups that you need to hide and show to see the “pages”… ;)
You can also reduce the size by using smushit or punypng, on this very page smushit says you can reduce the size by another 25kB, including 7kB in the main-bg image… so much for fireworks compression.
nice post, very helpful, thanks
Photoshop adds all sorts of META data when exporting, and many more unnecessary data not required in web production.
You can uncheck those options and have the same files in both PS and FW.