Fireworks CS5 vs. Photoshop CS4 Compression

Oxford,-MI-PS4-80

I know this looks like an unfair match-up, but it doesn’t work out like you’d expect.

After reading the second Smashing Magazine piece on Adobe Fireworks I thought I would run a few tests with it and see how it stacked up against Photoshop.

UPDATE (March 03, 2011): Commenter Michel provided a link to a much more detailed test between Photoshop, Fireworks and Illustrator (CS5 version). Great stuff, if you’re interested check it out here: http://www.tutorialshock.com/tutorials/shadows-photoshop-illustrator-fireworks/. Thanks, Michel!

Waaaaaaaay back in the day, like circa 1999-2000, I messed around with Macromedia Fireworks ( I think it was version 3). The very first Flash animations I ever did were created in Fireworks of all programs. For some reason I had an easier time making them in Fireworks, Flash was too confusing for me at the time.

But I never did really click with the program. As such I actually don’t own Fireworks (or any CS5 app) so I had to go and download the demo from Adobe. Side note: I HATE the Adobe process of downloading AND I hate their installers. Ugh.

To make this an even match-up, I also wanted to get Photoshop CS5, but the darned thing would NOT download after multiple tries, so I finally gave up. I might revisit this later when the Adobe servers are having a better night.

So that means that it fell to Photoshop CS4 to defend the family name. I decided to grade on a curve here to be fair.

Now I don’t see myself making too many vector graphics or even doing any retouching/color-correcting in Fireworks, so I decided to concentrate on what really mattered to me: file compression.

The test would be to see which program could make the smaller jpeg while still retaining the best quality for a web-ready file.

To start I’d need an image, of course. The one I chose is called “Oxford, MI” and it came from the stock photo site Morguefile. Go ahead and download it if you want to repeat my tests.

I opened this in Photoshop CS4 and immediately saved it as a psd file. I wanted a lossless file type to begin the tests with. I opened the file in Photoshop first. It was originally 2.7mb, 3372 x 2538 pixels at 180ppi to start with.

psd-image-size-settings

This isn’t the size I would normally put up on the web, so I reduced the file to 800 x 602 px at 72ppi using the “Bicubic Sharper” resampling to cut down on the smooshing of the pixels.

psd-image-size-settings2

With that done I went to the “Save for Web & Devices” screen, setting the quality to 100% and leaving the “Optimized” checkbox checked with no matte color chosen. What resulted was a 704 kb file that looked pretty much as I expected.

psd-save-for-web

No surprises there, so I moved on over to Fireworks to repeat the process. I opened the psd file I made and was confronted with a “Photoshop File Open Options” screen.

fireworks-psd-file-open

The size and resolution matched up with what I saw in Photoshop so I continued on. Once the image opened up I needed to change the size of it. I was able to do this by clicking the “Image Size…” button on the Properties panel.

Here I could change the values almost as I could in Photoshop. I say “almost” because I didn’t see an equivalent to the “Bicubic Sharper” setting I used when reducing the image in Photoshop. I left the resampling method on Bicubic and resized the image to 800 x 602 just like in Photoshop.

fireworks-file-size

From here there seemed to be a few ways to get a jpeg out of Fireworks. I didn’t see a “Save for Web…” type of menu command, so I just used the “Save as…” menu command. In here I chose “jpeg” in the file format box and clicked the “Options…” button on the left.

This brought up a window more similar to the Photoshop Save for Web screen. It looked like Fireworks preferred to default to 80% compression level for jpegs, but I pushed it all the way back up to 100% and left “Sharpen Color Edges” on. I also set the matte color to none and left the “Remove unused color” box checked.

fireworks-image-export

Once I saved the file I took both of them and opened them up in Safari. Check both of the examples here:

Oxford,-MI-PS4-100
Photoshop CS4 jpeg, saved at 100% quality from Save for Web
Fireworks CS5 jpeg, saved at 100% quality from Save as

The funny thing is, the Photoshop 4 jpeg was SMALLER than the Fireworks CS5 jpeg. 704kb to 812kb, respectively. I wasn’t expecting that. Also, if you look closely you’ll see that the Fireworks jpeg is softer/not as sharp as the Photoshop jpeg, despite “Sharpen Color Edges” being left on.

I can only assume this is because I couldn’t determine the Fireworks equivalent to “Bicubic Sharper” resampling when I resized the image in Fireworks.

So my initial test was a loss for Fireworks.

I was still determined to test some more of Fireworks compression. Next I went back to my Photoshop psd file (In Photoshop) and reduced the jpeg quality to 80. Photoshop came up with a 384kb file. Incredibly, Fireworks produced a 796kb file at 80% jpeg quality!?

At this point I could only assume I was doing something wrong in Fireworks. It can’t be that inferior to the last generation version of Photoshop, could it?

In a last-ditch effort, I decided to use the “Optimize to size” feature in the Fireworks save screen. I found the same problem with the Fireworks implementation of this feature as I did with the Photoshop version -namely that they don’t produce a file of the size that you type into the field.

Let’s say you type in that you want the file to be 32kb. Well, you’ll end up with a file about 60kb at least. Actually in Fireworks I typed in 50kb and got a 68kb file, but in Photoshop I typed in 32kb and got a 64kb file. So Photoshop was way off-base on that one.

This is why I rarely use this feature, because it’s never very precise with the results. What’s the point of having a field to type in the number I want if I don’t get the number I want?

So to wrap this up, my cursory test of Fireworks CS5 didn’t yield a very impressive result for compressing web graphics. I know there are all kinds of compression tricks with selective compressing and so on that could be done, but I just wanted to see what an “out of the box” test would get me.

I was hoping I would see a vast improvement in the reduction of file sizes but apparently this isn’t the case. If anyone has any reason why this went wrong or any tips on how to get the most out of Fireworks compression then just let me know. Until then I’ll just stick with Photoshop.

Previous » Next »

19 thoughts on “Fireworks CS5 vs. Photoshop CS4 Compression

  1. >>”Next I went back to my Photoshop psd file (In Photoshop) and reduced the jpeg quality to 80. Photoshop came up with a 384kb file. Incredibly, Fireworks produced a 796kb file at 80% jpeg quality!?”

    The quality scales in image optimizers are not standardized. This means one program’s 80% could be another program’s 40%.

    In order to judge optimizers, you need to compress the two images to the same file size (regardless of which quality setting is required to make that happen in either program) and then simply judge which one looks better to the naked eye. If the “compress to file size” option is not giving you accurate results then it may be that you have additional compression settings checked that are working outside the scope of that feature and messing you up. You can experiment by changing the various settings.

    And avoid altering the image in either program (sharpening, etc.). This can compromise the experiment.

    Also, you would want to run this test at various file sizes. Programs often use different algorithms or initialize additional optimization routines at certain quality levels—so you can see how this might get a little tricky. For example, Photoshop activates color down-sampling at or below 50% quality.

    So, compare two 50kb images, two 100kB images, two 200kB images, and so on and that will tell you which optimizer is better at which compression level.

  2. You know Ryan, I actually read that article, lol!

    Yeah I suspected there must be something wrong with my methodology but I didn’t think of that.

    While my demo is still active I might run some more tests and post back results. I don’t think jpeg compression is worth going out and buying Fireworks for, but for those who bought a suite and already have it then it could be worth cracking it open and using it for that.

    Thanks for commenting!

  3. This is quite a superficial test, I think.

    When exporting and compressing/optimizing an image for Web, there are many things involved. First, 100%, 80%, 60% JPG quality in Photoshop is not the same as 100%, 80%, 60% JPG quality in Fireworks. Here are some other tests:
    http://www.webdesignerwall.com/general/fireworks-vs-photoshop-compression/

    Also, Fireworks has several ways for interpolating pixels when scaling an image. Those can be found in Edit > Preferences; or just press ctrl/cmd+U; then on the General category tab, select one of the four available options: Bicubic, Bilinear, Soft, Nearest Neighbour.

    Third, when exporting an image from Fireworks, it’s better to use the command “Image Preview” (File > Image Preview or ctrl/cmd+shift+X), because you’ll be able to directly see the level of quality and the export file size! On this screen you can directly set export file format (JPG and % quality, smoothing level, progressive display, etc; PNG8,24,32; GIF; and so on). For example, change export format to JPG, select level of compression (80-90% works best), and check what will be the file size and you can also see the quality of the image exported.

    You must also know that Fireworks can use various compression levels in one JPG exported file. And it can separately set quality when exporting text in an image (to avoid artefacts around letters) — you can use a photograph, type some text on top, then export the image as JPG82% and the text areas as JPG92%, which will make text look sharp and clear while overall size of the images will be kept as low as possible.

    Many tests can be made before you can make a definitive judgment — is Fireworks compression better or worse then Photoshop’s. My personal experience tells me that in many cases, Fireworks produces better quality graphics with lower file size… but I can tell this after years of using Fireworks.

    Hope this helps a bit…

  4. Forgot to mention: Fireworks uses its own native file format: editable PNG (equivalent to PSD in Photoshop). If playing with photographs (bitmaps) you don’t have to make Fireworks open a PSD with saved JPG file in it (photo). Better directly open and export a JPG from Photoshop and then open and export the same JPG from Fireworks…

  5. Yeah Michel, Ryan kind of tipped me off to the whole “sliders are not comparable” thing, so I was up on that.

    As for the rest, I did assume my methodology was not fully comprehensive. Still, I’m glad I played around with Fireworks.

    I don’t think there’s enough to be gained for me to go back and really get that involved. I just thought it would be great if there were some immediate out-of-the-box gains that would justify pony-ing up for it.

    Anyone else reading this and using Fireworks you should definitely consider checking into Michel’s tips, y’all.

  6. That is disappointing from Fireworks. Some programs just work better than others at compression. I’ve never understood that. Final Cut for instance always puts out massive files and I can get better quality and smaller file size from several other programs.

    1. Hey Dave, It looks like some of the earlier commenters schooled me on why Fireworks appeared to fare so poorly.

      Still, as I mentioned in the article, I was hoping for some “blow me away” compression from Fireworks and I didn’t get it.

      I’ve only worked with FInal Cut Express, but I’m not surprised to hear that about Final Cut. That’s why I don’t care for working with video in the first place -the huge file sizes. Thanks for commenting!

  7. Well, I don’t think jpeg compression is worth going out and buying Fireworks for, but for those who bought a suite and already have it then it could be worth cracking it open and using it for that, thanx for all this.

    1. I agree completely. If you already have it installed, you might as well see if you can get some use out of it, otherwise the differences are too minor to make it worthwhile.

  8. Actually, recent detailed tests with Fireworks, Illustrator and Photoshop showed that in many areas (export size vs. export quality), Fireworks is a winner or is one of the best. Tests were a bit specific (drop shadows, flows, etc.) but a fact is a fact.

    Take a look, it’s an interesting read! :)

    1. Now that’s what I’m talking about! Let’s get some hard evidence up in here.

      Post has been updated with link you provided. Thanks man!

  9. You’re welcome! :)

    Fireworks is a jewel but not many have studied it in depth, as it deserves…

    (Btw, I meant “glows” not “flows” in my earlier comment, LOL! :-D

  10. Interesting, that there are differences. I though, that Photoshop and Fireworks are using the same libraries since both are Adobe products.

    1. Hey Adam, I think between it being two different “suites” (CS4 vs CS5) and also the old code from Macromedia that may be where the differences lie. Or perhaps the Fireworks coding team just approaches things differently than the Photoshop team? Thanks for commenting!

Comments are closed.