Oct 30

Tagged in: , , Comments:Add

Fireworks vs Photoshop Compression

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.

Do you use Adobe Fireworks?

View Results

Loading ... 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.

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.

Delicious Stumbleupon Digg

iPhone App Site Design Trends 5 Simple, But Useful CSS Properties

Comments

Pages: 29 28 27 26 25 24 23 22 21 20 191 » Show All

There are 283 comments (+Add)

  • 283 Bedava http://bedava-ya.blogspot.com

    Thanks teşekkürler güzel bir site thanks

  • 282 Richard Lee http://tdesignonline.com

    I did this test with a simple black to white gradient in cs4 for both. Some red text in the middle and a reflection and a few effects on the text at 300×250. The file sizes were definitely less in Fireworks but it was clear that the detail was less in fireworks too with banding in the gradient in the gif but not in photoshop. though you think you are getting the same quality because it says 90% in FW I’m not sure you are. Maybe it just works better with more detailed imagery you know?
    Results were as follows:

    {P-jpg:16kb / F-jpg:12kb | P-gif:16kb / F-gif:12kb | P-png:28kb / F-png:31kb} .

    LIke I said lower file sizes but also lower quality in fireworks except for the 24-bit png which photoshop had a lower file size but similar quality. I’m not so sure optimization is all that better in FW but I’m confident there are exceptions as above in this article. I will continue to test but this is my first test and I was shocked.

  • 281 Elliot Lings

    I don’t know a way of editing GIFs when indexed in Photoshop, so I use Fireworks for this…

  • 280 Ross http://www.rossgledhill.co.uk

    Sorry, I meant save as adaptive PNG-8 - with index transparency!

  • 279 Ross http://www.rossgledhill.co.uk

    Yeah, I’ve always used both. Especially for web design. I usually export a PNG-24 from photoshop, then open it in fireworks and (in most cases) save it as a PNG-8 in Fireworks with Adaptive Transparency, and the final filesize is reduced massively.

    This works really well for items with drop shadows with a low/medium opacity

  • 278 Douglas Bonneville http://bonfx.com

    I’ve been a FW user since v1.0, and Photoshop since 2.0. Fireworks has always been the better web layout and slice maker, handily beating ImageReady. And the better image compression has been a secret feature for some reason since v1.0 going back to about 98. Now I use FW for iPhone apps. Pixel level precision, reusable symbols, and pages - nuff said right there!

  • 277 Website Design http://www.newviewit.com

    Wow is this new in CS2? I remember trying the different compression methods a few years ago and picked PS… now I’ll have to go back and give Fireworks another look.

    Thanks for the heads up!

  • 276 Web Design http://exmmedia.com

    love both…

  • 275 Hassonya http://www.birdilim.com

    Yes This is true I Agree. I use Photoshop and Fireworks
    Design for Photoshop, Optimize for Fireworks
    Best Option for Designers:)

  • 274 Hassonya http://www.birdilim.com

    Yes this is true. Im using Photoshop and Fireworks.

Pages: 29 28 27 26 25 24 23 22 21 20 191 » Show All

Post Your Comments

(required)

(required)

Comment Guidelines

  • Please keep comments related to topic. And be nice, don't spam!
  • Basic HTML tags are allowed:
    <a href> <abbr> <acronym> <blockquote> <code> <em> <strike> <strong>
  • Note: un-related or spam comments will be deleted.

Live Comment Preview

Back to top