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.
All my photos lose a fair bit of colour saturation.
For me, I have been using Fireworks for creating some web graphics but I did not notice about the file size in compression. Thanks for this post. It is really worth reading!
hi
my test result:
image type: JPEG
orginal image size: 27.3 kb
PS Compress: 23.3 kb
Fireworks compress: 15.3 kb
quality:same (fireworks is lower)
Cyber-Ottoman.com
Cyber-Ottoman.com
Cyber-Ottoman.com
I’ve always used Fireworks. I was introduced to it when it was owned by Macromedia. I am not a designer, mainly i develop sites and I find Fireworks to be a lot better and easier than Photoshop when it comes to cropping, resizing and simple stuff. My former boss had bought CS3 for me and he was like what is that, why don’t you use photoshop? I always thought fireworks was developed to make graphics optimized for web. That is why i never open photoshop
Thanks for this amazing post & “data/results” between both programs. I prefer Photoshop CS4 hands down! Being a user since ’04 using older verions than that year. But, i do love the fact how you can manage multiple pages and so forth on Fireworks & have been giving it a try more.
Seeing these results here on photo compression is making me consider using it a lot more! Plus using Fireworks CS4 feels more like home for a web designer, once you’ve grasped its program!
Highly recommend other “Photoshop only users!” to give Fireworks a try, along with tutorials, to get a hands on of what it can do, it’ll do wonder’s! ;)
Thanks for the article!
- MexiChriS
p.s. to those wanting to grasp Fireworks, check & try this out!
“The Ultimate Round-Up of Fireworks Tutorials and Resources”
http://www.smashingmagazine.com/2009/07/27/tutorials-and-resources-for-adobe-fireworks/
I use Fireworks to create both wireframes and projects visual design storyboard.
I hate creating multiple files for each page in Photoshop. If i make a change on an element in a page, I’ve to do the same on all pages manually.
Fireworks instead has nice feature of Pages, States and Levels, which you cand share elements in multiple pages.
I hope Adobe push next Fireworks CS5 as main web design software tool, making it more powerful (it has bad color manage) and reliable.
I love Fireworks.
I have tried Photoshop but it is so complicated… I managed to learn Fireworks from a few internet tutorials. It is much more intuitive than Photoshop.
Only problem is… most tutorials on the web are about Photoshop!
Long live Fireworks I say.
It comes from the idea that Photoshop was “offline” software and Fireworx “online” from the times at Macromedia. I’m using Fireworx + Pixelmator.
Btw, a mistake is in first paragraph of your article: “…is alway my first…”
Photoshop and fireworks both indispensable. Especially a web design is using those two programs. Whether the design with Photoshop, fireworks and we put into practice. Size is more appropriate ..
The pre-compressed file-size gap is even wider: I’d not used Fireworks for years until I recently received a design as a 700kb .png (which I couldn’t open). The file, redelivered as a .psd was 5Mb in size. Fireworks made it back into the arsenal soon after.
This said… Fireworks feels ‘broken’ to me and full of bugs. Which is a shame because the workflow makes way more sense for web. I still use Potatoshop & smart-objects (vs. FWx & symbols) for the majority of the design process. Considering committing more once I’ve seen CS5.
I’ve used Fireworks since the beta version, and I have to say that it’s very useful to make quick mockups, wireframes, demos, and also all the graphics for a website. I use Photoshop only for advanced photo editing tasks. I hope that Adobe continues supporting the development of this great tool.
Wow, that’s awesome! I’ve started using Fireworks just because I find everything web related just one-step simpler (like the fact that the dimensions of whatever object you are looking at are almost right there in the bottom panel)
Interesting review, though perhaps not surprising with FX a supposedly dedicated web based application. Theoretically FX rocks. The properties box gives you pixel point perfection that is hard to achieve in PS. It’s gradient tool is superior to PS. It’s slice capability is much more intuitive than PS. The pages function is excellent for a multi-page site. But. But. I get an application crash on average at least once per session. It’s export capability is seriously flawed. The inability to draw a gradient on a blank canvas defeats me and, if you take the time to learn, PS is a much more capable slicer than I first imagined, thought not intuitive I would admit. FX is also buggy. Adobe did not pay enough attention to detail. What gets me most is that FX has capabilities sorely needed in PS, and vice versa, another Adobe con to get you to buy both. The funniest element of FX is the export to html and export to css. Export to html gives you tables. To be fair, it works but good luck trying to understand the code. Export to CSS results in nightmares too awful to contemplate. I am not interested in those capabilities, so no big deal, but it does seem like Adobe are sticking two fingers up at us, telling us to spend the money and, by the way, you will get shi*!!!
Very nice article, I think Photoshop is best for Photos, actually this was the initial purpose of this software and it’s major specialization.
Instead of that, Macromedia Firworks (Now Adobe) was made to do website graphics from the start. You can have all graphics in vector format, you can even do minor photo work as well on FW. At the end of the day FW is best for web designing. I have been using FW since version 4. And photoshop from version 5. So i have been around long time to be able to compare in my own experience.
Don
I recently made the switch to Fireworks, and I can tell you one thing…I’m never going back to photoshop again, when it comes to web design. I’ve been working with photoshop since CS2, but Fireworks has become by first choice, I don’t think it’s going to change any time soon.
I was lucky enough to get in on a day of lectures about multiplatform deployment by Adobe.
Someone actually asked if fireworks was better at web compression than ps.
The guys from Adobe said that it was more efficient and would consistently produce small file sizes. When asked why not use the same behind the scenes compression in PS. They simple said that there were legal issues left over from acquiring fireworks and they couldn’t use the code in PS.
Looks like their going to position Fireworks as software for Web dev and PS for photos in future
Glad you posted this. I thought I was going crazy with the end result file sizes. I’ve always loved Fireworks and thought maybe I should use Photoshop more… not anymore. THANKS for a great post.
Fireworks is a great program for web designing. But Photoshop is better for details. Usually I design graphics in Photoshop and save them as .psd. Fireworks can read psd files just file and still keeps the layers at their appropriate location. Then slice up my graphic and export it into HTML. DONE.
As a big Photoshop fan I don’t use FW at all. But I was forced to use it in my former job. I’m sorry but have to say it was just pain. I’m not saying it’s bad software but for experienced PS user I was missing lots of features.
First thing I remember is FW’s accuracy. I mean , try to rotate a thing with pixel accuracy. Correct me If I did something wrong but I just wasn’t able to do it.
For me it is program which mixing vector and bitmap graphic at fracture of price you’ll pay for PS+AI and that’s just speak for itself.
About compression. Some comments here say FW actually has less quality with the same compression. If this is true than whats the point.
Don’t take me wrong. Fireworks is software which definitely has a place in designer’s work flow till you reach the point when you want create something more than button, button, bar, menu, footer website with corporate colors.
My opinion though.