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.

[poll=17]

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.

png compression

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.

gif compression

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.

jpg compression

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!

wdw results

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.

318 Comments

1 14 15 16
  1. ORJİNAL PEMBE MASKE
    Jun 16, 2011 @ 1:47 am

    Unutmayın, Nick kullanmak Mac OS Bu eğitimde çalışmak için X ve (belki), Windows kullanın. Windows içinde CS4 bu hile denedim ve ben aynı şey var: Fireworks bana daha büyük bir görüntü verdi. Bu akşam CS5 ve JPEG resimleri hile yeniden deneme ve işe yarar! Gerçekten önemli değil!
    Her neyse, eli için teşekkürler, Nick!!!!

    Reply

  2. Pozycjonowanie
    Jun 19, 2011 @ 3:22 pm

    I must try! Thanks

    Reply

  3. Evan Skuthorpe
    Jun 22, 2011 @ 5:41 am

    I like the bit where you say 20kb less = 320mb less a day – very good point!

    Reply

  4. stronywww
    Jun 30, 2011 @ 5:59 am

    Fireworks is cool

    Reply

  5. Nargile
    Jul 18, 2011 @ 2:49 pm

    Good job,thank you

    Reply

  6. RyHoo
    Jul 28, 2011 @ 7:17 am

    Its 320Mb per day assuming that every day You have 16.000 unique visitors. I think, that more than 50% of them are returning visits and they already have the gfx cached. Well – have a look at Your Webalizer logs and see how many times You served this gfx vs how many visits You have.
    But, yes, You are right that we have to fight for every byte…

    Reply

  7. Alexis
    Aug 1, 2011 @ 9:35 pm

    Nice examples (nice design as well). I’ve just been comparing fireworks exports to Google’s webp format. WebP pwns but its only suported in Chrome and Opera at the mo, Firefox support is bugy and should be released soon. Lets hope IE follows suit. There is also transparency support in development for webp. But I imagine gradients and logos will still be more efficient as png. Webp is built for compressing photos, using the VP8 codec.

    Reply

  8. complex41
    Aug 23, 2011 @ 12:37 pm

    And then he handed you the thirty-five 45

    Reply

  9. Creative Basement
    Aug 24, 2011 @ 2:33 am

    Great article and some useful examples. I’ve been using Photoshops ‘save for web’ for years and wondering why I wasn’t getting the quality to file size as good as some websites.

    Reply

  10. Dan
    Sep 14, 2011 @ 7:24 am

    Fireworks is also the only program i know, which can export 8bit PNGs with alpha transparency. Photoshop has the benefit of a much better dithering algo, which really comes into play if you store gradients in 8bit images.

    Reply

  11. JJ Spelman
    Feb 7, 2012 @ 1:16 am

    I have never been a fan of FireWorks since I first got it back with macromedia products. I have always used PhotoShop, and still do. This has made me think a bit more about it though…

    Reply

  12. Dinle indir
    Mar 25, 2012 @ 2:52 pm

    I will try it now! Thanks!

    Reply

  13. Steven
    Mar 29, 2012 @ 2:02 pm

    The reason it’s better is likely because Fireworks was originally a Macromedia product – Photoshop obviously Adobe, therefor it seems likely that the Macromedia programmers were just better at their jobs than the software engineers at Adobe.

    Reply

  14. overbyte
    Jun 18, 2012 @ 4:39 am

    I think unless the optimization / animation process is as streamlined as it is in photoshop, nobody will care if they can save 5% in the compression by moving to fireworks.

    Reply

  15. John Kurrl
    Aug 24, 2012 @ 12:08 am

    I have compressed Photoshop jpg image sizes by loading them into another program like MS Paint, then simply saving the file. The question is, how much image degradation does it really cause?

    Reply

  16. Ibiza
    Aug 24, 2012 @ 1:26 am

    I think, that more than 50% of them are returning visits and they already have the gfx cached. Well – have a look at Your Webalizer logs and see how many times You served this gfx vs how many visits You have.

    Reply

1 14 15 16

Leave a Reply