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.
Wow! I knew something!
I usually use PhotoShop for all my designing but always save from PS and open and export from Fireworks, only for the optimization!
Good article and nice examples :0)
Unfortunately, Photoshop has broken web image optimization a bit.
Within PNG I’m always using pngOptimizer. My pictures gain ~10% less size. I don’t know, what do the guys from Adobe screw but many people complain on PNG support in Photoshop.
~58: too much of time and one license more to buy. :P
I used Photoshop for anything. Very interesting findings. I start to use Fireworks to store images for my blog. Thanks for the article!
Thanks for posting these findings I use fireworks for their new css feature, but never thought that the image optimization would have been such a great benefit, But I am convinced that this is now the best way to go.
–
Thanks and Regards
Noel for Nopun.com
a graphic design studio
Use PNG Optimizer. In some cases it reduces your png weight even 50% less. To reduce jpeg weight use JPEG cleaner. Photoshop add a lot unnecessary information into image.
If you are a professional, you use both. Fireworks is much better than Photoshop for web.
“If you are a professional, you use both.”
Unless you use one or the other. If you’re a professional, you know how to use whatever tool(s) you’ve chosen to use.
If you are really that worried about it then use lazy load:
http://www.appelsiini.net/projects/lazyload
Also I really don’t see the big deal here. Use lazy load, and after the first load people will have every cached anyways.
really dont know about this, but firework does has some advantages if compare to photoshop but not in image editing but on designing, and it true
I use Fireworks and form day one and I like it simplicity in making small graphic elements like buttons, headers and even logo design. It’s more simple then Photoshop and no with Photoshop integrated effects it can do almost everything you can imagine.
Fireworks made for simple web graphic. That’s why it has better compression then Photoshop.
I am really a Fireworks user and Like it’s simplicity and effectiveness on Web projects. I am not so sure about Photoshop but it looks complicated to me. I fireworks one can have different pages in one file and one can have rapid prototyping to show the work to client before the coding begins.
I keep trying to like Fireworks but the app UI is just so counter-intuitive. What’s worse is that it’s lacking basic abilities you can find in any browser. Small caps? You need to do that yourself.
I guess it comes down to what Fireworks is. If it’s an app prototyping tool for turning things into AIR apps and so forth it’s great. If it’s for designing web pages I’d much rather stick with Photoshop.
Oh, and as for image compression, I don’t use Photoshop. I use ImageOptim which compresses to a degree that is equal or superior to Fireworks. Oh, and it’s free.
fireworks is way better for website prototyping than any other software.
it’s a mess working with photoshop and vector elements. designing ui’s is fluid and easy. changing elements is even easier.
Completely agree with debugr, read my blog post on the subject if you have a few minutes spare.
Always used to use Fireworks for image otimisation but went over to PS CS4 cos I assumed it was better! Never assume anything!
I’ve just tried JPG Cleaner and found at least a 50% reduction in image size with no disernable degridation in image quality and it’s quick. So that’s one for the toolbox – (thanks Maciek)
And thanks for the post; very helpful…
I started using Photoshop at around version 5 and really only started to take notice of Fireworks around CS3. I’m glad I did take notice. It’s a brilliant tool for very rapidly prototyping UI designs / widgets for a range of applications. It’s support of vector based editing plus the ability to easy fine tune an underlying grid to snap things to (typographical grid / baseline structures are incredibly easy to setup and accurate) and the greatly reduced footprint are highlights for me.
What I don’t like so much are its text tools. I don’t know if its just my copy on the mac or a bug (guessing its the latter as it was a known problem in CS3) but text selection and manipulation feels really clumsy to me. In addition the work-flow for adding image export profiles is again unnecessarily awkward and convoluted.
I think for me its the combination of PS and FW that makes for a killer combo. I couldn’t live without either and so I regularly encourage web designers and people new to web design to at least take a look at Fireworks and to give it a chance to melt its way into their web design work-flows. :D
I’m using Fireworks for many years doing my all web-design work. I started from Macromedia FW MX2004, v.8 to Adobe CS3, CS4. It’s the great tool for fast and pro web-design. For me the 8 (macromedia) version is the best. You can easy create any type of web site in FW. Export to PSD or easy create compressed animated gif. The best ever. I use photoshop (CS4x64) only for editing/export PSD projects. PS, as for me, is better for cool photo editing and digital painters. This is only my thoughts. =)
Fireworks is best not just for compression, but for it’s vector editing capabilities, effects and easy/quick interface. For png optimization http://www.gracepointafterfive.com/punypng seems to work wonders, and there are many other tools (supporting other formats too).
Yeah, what he said. I was just going to add a comment about punypng, when I saw Ricardo had beaten me to it. I’m a speed junky, so I optimize most of my graphics (which tend to be created in Fireworks) with it. It’ll compress the current background on this site by an additional 5% (about 7kb).
yeh this is right PNG is nice format for web it works great and light, specially Adobe Fireworks software is concern