An Eye opening article……

now i know, that’s pretty helpful, thanks Nick!

Really didn’t know… Nice article! Thanks!

@mattia: not really, Fireworks was born for creating web images of all kinds. It’s the only application I use for creating web graphics simply because it (well, used to before Adobe took over) loads quickly, has a much easier UI, and overall better at completing tasks when it comes to web design.

You’ve highlighted one of the problems with Photoshop in your first example. There’s no such thing as 24 bit PNG with transparency. I don’t understand why the dropdown couldn’t just contain 24 bit or 32 bit as it does in Fireworks.

@James

In Photoshop, Save for Web will do this and also reduce the file size by removing all unneeded meta-data.

I love Fireworks!

well I can’t agree with your theory in this article. I also made this kind of test and in my opinion photoshop’s save-for-web option is much better. At least when it comes to JPEG. The images are noticeably sharper, and the file sizes are very similar to the ones saved in fireworks.. but once again… the image simply looks better.

You didn’t mention if you use just File/Save as.. option or save for web, so I can’t be 100% sure. But that’s just how I see this… Cheers

Photoshop is made for editing photos not to design websites..
So use the right program for the right result!

Anyway… I love both of the programs ;)

well, for web FW is better except for one very disturbing issue: brushes.

the brush engine in photoshop is amazing, with the ability to create your own. FW sucks in that department. another great item of FW is the path palete and the pages ability. but overall PS is much more powerfull on almost every level.

in short, for web work (mostly) FW. since cs4 there is better integration between the 2 so this is the best workfllow for me.

I read somewhere recently that when you save a file in Photoshop on a mac it puts some extra meta data in the file, but when you upload it to the web the extra data gets taken out. That could explain the difference in file size? Maybe fireworks doesnt put in any extra meta data in?

I knew there was something fireworks make better… rsrsrsrs

Great topic…

As a web designer, I always work with FW since the first release.

During a webmeeting with an Adobe Engineer, he said to me that FW was built for compression, compression and compression (and today quick mockup).

Remember for the oldest ones! when we used 56K modem… and built 30Ko pages.

And keep in mind, FW must keep some assets against king PS.

Haha, i like Marten’s point.
Some people i speak to assume that everyone also uses Photoshop to design all websites. It’s great for grungy and arty websites that use lots of layering and texture to get the final look, but just doesn’t compare to Fireworks when pixel perfect work is required.
I wish Fireworks was championed by more designers like in this post as i would like to see more articles and tutorials written for it.

I don’t use fireworks, however, along the lines of compression technology: Those looking to squeeze filesize for Flash projects—Save all your images as uncompressed PNG’s (whether it’s from Photoshop or Fireworks) and let Flash handle the “jpg compression” for optimizing. You will see some better results, visually and with file size.

Hi there! Well, great article this! I could never guess this but as a designer i always used both but for web layout and logos prefer Fireworks. Its funny, i always had this discussion with designers about Photoshop and Fireworks and its really impressive how people loves Photoshop! In some cases they even never had started Fireworks! Adobe off course have an easter eggs in their package! Well done!

I think that you’re probably not comparing the same thing. Fireworks likely has better image compression defaults since there are lots of parameters you can use in JPG and PNG optimisation; in GIF too, the choice of the 256 colour palette can be optimised based on “perception” algorithms.

Plugins or separate packages to do JPG/PNG/GIF optimisation exist that can outdo both Fireworks and Photoshop no doubt… but there are so many options in the “save to web” of both packages that you cannot be sure that one or the other of the packages makes a real difference.

Photoshop “save to web” has one option which I have really noticed makes a difference: quality=50 is vastly different to quality=51 when you save. Above 50, the subsampling options change and you get a better result (with corresponding larger filesize).

Why not try this : save to JPG with Fireworks. Now save the same image from Photoshop, specifying to optimise for the same file size. Do the images look different? If so, the algorithm for optimisation is different…

Good article! I have followed your posts for quite a while and I really admire the quality of your work and content. I am surprised as well by how much people don’t use Fireworks, because, in my humble opinion, sometimes Photoshop is an overkill.

Don’t get me wrong, I still love them both!

Having said that optimization does make a difference, specially if a site gets a lot of traffic.

Yeah its real, also try jpg compression to 80% and you have 20 or 30 kbs of gain.

the module of photoshop (export fro web..) is very bad, i use it for my drawings and the file always exceed 100kb of grabage.

dont use the module

Cheers!!

I’ve been using fireworks for 6 months and I luv it!

I’ve used FW a lot and was very satisfied with the web-workflow, but i noticed that PS make better antialiasing rendering typos. Now i make the most web design in PS but i am missing the simple and streight workflow of FW … did someone else noticed the difference in rendering antialiasing between PS and FW ???

With Adobe’s acquisition of Macromedia a few years ago, I am hoping they will eventually incorporate FW into FS as they had done with ImageReady.
FW has its pros, but they’re not enough for me to give up PS, the standard in our industry, altogether.

Does it really affect your load time noticeably? I get it, on your end, a little savings for every access is a big deal, but a page load only accesses each resource once, so that 20kB savings might be like 200ms faster for me, probably less. Am I missing something?

Hi, Michael E
I also work in a web development environment and I am a fan of fireworks for all the reasons you posted. It in many ways is superior to photoshop for web development.

cheers

I never knew how to use PhotoShop very well. I could do basic things but not more advanced functions. I started a Web Design (re)certification program at a local technical school. The teacher taught us FireWorks. As I became more comfortable with FW, I saw the benefits of the program. I feel grateful now that I don’t have to use PhotoShop for my web work, as it is too overwhelming for me.

oh, and for JPEG, use JPEGtran.

There’s also no point in using GIF anymore. PNG-8 easily does everything GIF does (except for animation.. it’s coming, though!) and more.

What a brilliant post! I guess for Adobe, FW was an itch the had to own but couldn’t solve.

Thanks for posting

Wow, who knew?

I have been using Fireworks for a long time. Photoshop is a better design software than Fireworks, but this is the main goal of Photoshop, and the main goal for Fireworks, is to be the best “WEB” design software. Just take a few steps back in time: at the beginning, Photoshop did not have options for web and then Adobe make a partner application where Photoshop export the arts and then export in order to use them for a website (I don’t even remember the name of that software); and in the latest versions of Photoshop, this functionality have been integrated. BUT… Fireworks was born with this and FOR this functionality. I think that this is why Firework handle compression better than Photoshop! Because it was created with that goal in mind.

Surprisingly enough, based on the findings from my recent survey there are quite a bit of Fireworks users.

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

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

If you are a professional, you use both. Fireworks is much better than Photoshop for web.

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.

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

Completely agree with debugr, read my blog post on the subject if you have a few minutes spare.

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

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

yeh this is right PNG is nice format for web it works great and light, specially Adobe Fireworks software is concern

This is really strange. When CS3 first came out – I attended an Adobe Roadshow and I am pretty sure they said that the new Photoshop CS3 was going to use the same compression engine as Fireworks. So I assumed the performance would be the same.

That’s disappointing.

Actually image compression is the only reason why i use fireworks. I dont like the interface at all, but the compression rates and quality are quite impressing. Additionaly i use ImageOptim (http://pornel.net/imageoptim/en), a small piece of OsX Software which gets rid of some extra info in image files, to get even smaller png files.

I also recognized the difference between the two tools and now I also slice my design with fireworks. After that I try to compress the image again with yslow and SmushIT…That’s a really great tool

Photoshop is what I learnt to use first and I loved it. When I started work experience early this year in a web design office I was made use Fireworks as that was all the boss knew in the office and he was always against change.

I hated it at first because I was so use to PS but after a while I got to know it well enough but it still held me back in terms of the finished design as I was limited to what I could do.

Now what i do is create the whole design in Photoshop and once the final draft is approved I import the PSD in Fireworks and save it as a PNG and slice that file. I prefer Fireworks for slicing as it is much quicker and simpler in my opinion. I never tested the files sizes compared to PS though, some good savings in this example.

Nice article. Although, I think the size difference of web ready output is important, it is just icing on the cake. Fireworks is under appreciated and is SO much better than Photoshop for web design work. I think the only reason people still use Photoshop is because they haven’t tried Fireworks.

Yeah I was at the Adobe Roadshow conference. The speaker made this a major point of discussion. Telling everyone to stop using Photoshop to export web graphics and start using Fireworks. You’ll really notice a much more substantial saving when you’re working with photos over illustrations too.

When asked why the exporter wasn’t in Photoshop – his response was a standard “it’s harder than you think – we’re working on it”

Yeah, I just started using FW myself. I love it!

I always knew that many people utilized FW for effective web layouts, but I didn’t know that the program was capable of better compression. I know that you have posted tutorials on PS and AI..maybe you should include FW in that list now?

I always love your tutorials. You have a wonderful eye for design.

You can also reduce the size by using smushit or punypng, on this very page smushit says you can reduce the size by another 25kB, including 7kB in the main-bg image… so much for fireworks compression.

Photoshop adds all sorts of META data when exporting, and many more unnecessary data not required in web production.

You can uncheck those options and have the same files in both PS and FW.

It is very simple. Photoshop was built for image editing and retouching. Later on, they bolted on all kinds of web functions. But in essence, it is still a photo editor.

Fireworks is set up as a design tool though, and is much better at that. It is a pity that Adobe doesn’t seem to care too much about their FW userbase, because important bugfixes and/or new features take a lot of time before they implement them.

Fireworks needs a more solid font management (still not up to par in CS4) and less crashing, and then, well, it’s kind of perfect.

I tried using Fireworks, but so far i haven’t found that magic setting. I use “Save for web and devices” in Photoshop, with following results as example: normal “Save As…” png 24 : 212 KB, , with “Save for web and devices”, 76 KB. I opened up Fireworks but it gives me about the same size, 76 KB… With transparency, of course. Did you know about “save for web” Photoshop feature or can Fireworks further reduce this?

I’m a long time Fireworks user and I’ve always appreciated its compression. However, if I’m really looking to save kilobytes these days I use an online service. Try running your Fireworks images through PunyPNG – http://www.gracepointafterfive.com/punypng

They can get a lot smaller without any loss of quality.

hmmm, took a look at fireworks, but, how do you make things like this? http://www.flickr.com/photos/77579546@N00/4067992463/sizes/o/

@hans: I believe the flickr file you asked about used a feature in Fireworks that allows you to leverage Photoshop layer effects. The feature is called Photoshop Live Effects. If you have both apps installed, select an object in Fireworks, then in the properties window click the plus sign next to Filters. You should see the “Photoshop Live Effects” in the drop-down menu. Selecting it will give you a list of effects you can use in any combination, just like the layer effects in Photoshop. I used inner shadow & inner glow to acheive the effect shown in the image.

Google “fireworks photoshop live effects” for more info.

I love Fireworks and find it much easier to use than Photoshop, having come from a vector-based background. I also appreciate Fireworks unique ability to make PNG-8 files with alpha transparency – something that Photoshop cannot do at all (at least the version I have, CS3 cannot do it).

Fireworks RULES!! Been using it since 1999.

I have only recently gone back to fireworks as I had ben happily using imageready for all animated gifs that I needed to generate. Now with imageready totally gone after my latest jump to CS4 from CS1, I am learning the new fireworks and I honestly would of preferred to have the imageready program built into photoshop. I do almost all my work in photoshop, and I am much more comfortable with it, (and faster with it) and prefer the filter, script and plugin options I have with photoshop.

I am normally very fussy about my filesizes and push the software as much as I can to get the best result.

Don’t forget you can save kb by refining your code as well.

So I will use Fireworks, space is limited.

Major problem with PS ( till PS CS3 as i still use it), there is no way you can find the Objects height and width as you can easily do it in FW.

I love FW.

@Tom – Yes it’s better for web design, that’s what it’s made for.

The biggest reason people don’t want to switch from PS is because FW has a different workflow, but once you master it web design will become much faster in FW than PS. Fireworks is for rapid development of websites.

You can set up Pages in FW that basically act as grouped layers so you can design your entire site in one PNG. Exporting and slicing is also much easier and quicker.

Also, don’t think your FW graphics won’t be as good as PS. If I was as talented as Nick I could make his fish examples above and they’d look just as good.

The only thing FW is missing are the custom brushes.

I started with FW so for me PS seemed horrible to switch to (it’s the other way around for most people) but once you get used to how they both work, they both have their advantages.

I used to use Fireworks but haven’t in a long time. I had no idea that FW compressed better than Photoshop! Thanks for the side-by-side comparisons; they were great!

It brings up a good point, what is the best image compressor out there?

Photoshop is far superior interms of laying out graphics and editing. Yet Fireworks has the better compression and Alpha Channels.

One would think Photoshop would absorb Fireworks since they are both Adobe now, RIP Macromedia

Have you compared with optimization in Illustrator? Illustrator is also nice for web graphics. You can actually use the crop tool to optimize as well in Illustrator.

Hey that was a really nice post… I work in a website designing company and appreciate it a lot…

Did you checked the metadata (EXIF, IPTC…) and color profiles that may be incorporated (or not) into files. It has an impact on file size.

Hey Thanks,
I love this article because I am a loyal fireworks user ever since I started my career as a web designer. Fireworks surely does not have as much exposure as photoshop does (not that I am biased, I love photoshop too).

Anybody interested in learning fireworks, You can visit my fireworks tutorial section at – http://www.imajine.in/fireworks_tutorials.aspx.

I am sure you will like both fireworks and tutorials ;).

I had been told the reason of why at an adobe seminar once… but I have forgotten now, which sort of makes this comment useless, but I do use fireworks, even for my designs, as I find it quicker to mock up layouts, apply gradients, partterns etc…

If i need a highly custom graphic I normally take that into photoshop, play around with it there and then bring it back into fireworks…

Awesome as usual. I’ll be using Fireworks a bit more now. I know that every kilobyte counts for your sites so this is a great thing to find out.

Cheers!

P.S. lets go for beers soon with Verne.

@Keith – it has many more benefits than just the mentioned compression improvement.

I like how everyone is jumping on FW now a well know designer mentions something good about it, maybe you should explore further Nick and report your findings to the rest of the PS die-hards.

FW is a fantastic program, as I said before, web graphics can be made just as well in FW and your work flow will be improved.

FW for web design, PS for print design IMO.

This is a nice article and highlights the strength of Adobe Fireworks. It is such kind of information people are looking for as it affects their daily working style and end results!

Drop in a line if you would like to discuss more on Adobe Fireworks.

This comes as a no-surprise. I’ve been using Fireworks since 2002, working on animated gifs for a webcard company. Back in the day of dial connections every single bit counted. We had to work with a 20kb limit for animated GIFs (300 pixels width or height and usually 3 frames)!

Fireworks is my software of choice for web graphics and prototyping. Macromedia did a great job with Fireworks and I’m pleased Adobe has kept up. Besides its superb image compression, FW has a great set of features, it’s easy, powerful and intuitive. Take frame masking, hotspots, slicing and image mapping, for example.

I use Fireworks for my web page mock ups but never really thought about using it for slicing up my PSD layout for a full website. I’m used to using Photoshop for creating the web graphics for my website but maybe I will try Fireworks instead.

I certainly love fireworks. Use it everyday at work.

i just found this webpage today, searching for “great web designs” or something similar since I’d really like to update my own homepage. Just love this! It’s absolutely gorgeous and, to top it of, really informative! Me like a lot :-)

I’m using FW for all of my vector and image works. I use PS and AI very well too but i don’t know, just habituation i guess

There is no way to compare FW an PS when you focus on Webdesign. FW is just so much better, handful and quicker than PS in that matter. Try slicing a website in PS and FW and you’ll see the difference, FW is so much quicker.

Tru. I`m always using fireworks to spare few KBytes.. On large pics – even more that “few” (in VGA pics, it often even almost 1/2 of PS result).

Nice comparsion!

Went to an Adobe convention a few years back and the speaker explained this at the time. FW was designed from the ground up to export for the Web.

Actually from the scratch, (Macromedia) Fireworks was made to design/export for the web. And, (Adobe) Photoshop was made to design for Print/Film industry. But Now both are used in print/film/web, and it’s upto the designer’s choice to use which one.

Started using Fireworks way back and have never ditched it for Photoshop or other tools since I can do all web-related (even print sometimes) jobs so much better than with PS. The thing is a lot of graphic designers moved to web design in the past few years so Photoshop became the de-facto tool for designing everything from simple websites to WP themes etc (because it’s what everybody knew and used on a daily basis). PS was not meant for web, while Fireworks was definitely built from the beginning for the web by the defunct (read “swallowed by Adobe”) Macromedia. Using PS for designing web layouts is like using a monster truck to plough a field , you CAN do it but why not use a tractor (Fireworks) designed specifically for that. Not the smartest allegory out there, but you get the point.
Am I biased in my review? Definitely, being a long-time Fireworks user, but it doesn’t mean that what I said is not true in any way.

I’m going to give a fireworks a try. But, sometimes (not always) I get much better compression with 24-bit pngs using Preview. Obviously, this is a mac only solution. For those who work on macs, I’d highly suggesting saving a file in preview and comparing file sizes.

I HEART Fireworks and we’ve used it here in our web design studio since 1998 (I think, man I’m old…). It’s always my first choice when it comes to web design. I love the way it handles vectors, gradients and text (to name but 3) it’s far superior for web graphics than Photoshop. Photoshop is an INCREDIBLE programme, I use it primarily for image manipulation and retouching (as it was designed to be used) and Fireworks for web graphics (as it was designed to be used). I really really hope Adobe doesn’t sideline it – I think I’d cry…

Lovely comparison thanks!

Fireworks can reduce the physical size of an image much better than Photoshop aswell. particularly when you are working with an image that has already been optimised.
For example – if you want to resize an image to 150px X 100px down from 300px X 200px Photoshop will show jagged edges and severe image degradation long before Fireworks does.

Interesting fact, but Photoshop is way more popular then Fireworks and I don’t think in the near future this will turn around.
As Vishnu said, Fireworks was designed for web related images, this can be an explication for the smaller size.

Yes, That’s why Fireworks is my fav! I’ve checked that whn i first use fireworks
now ur site loading faster then before :)
Thanks

I’ve always loved Fireworks for this and other reasons. While Fireworks CS4 got rid of it, earlier versions had a ‘System’ anti-aliasing option for text. When making comps, it exactly mimicked how copy would look in the browser (far better than any of Photoshop’s anti-aliasing options).

My only issue with Fireworks is that I cannot embed an sRGB color profile. Great compression, definitely… but the colour shift is unacceptable. All my photos lose a fair bit of colour saturation.

I’m happy to see an article like this. For years I have used fireworks for professional website and have found to consistently produce better results for web work than Photoshop. Sadly I feel both Macromedia and Adobe are letting fireworks languish without the care and attention to detail that a program of this caliber deserves. The basic pencil and eraser tools still do not work intelligently at the pixel level. The program also seems to have some serious speed issues.

I hope that as time goes on Adobe will wake up and devote some real resources to the fireworks program.

Greg

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!

Cyber-Ottoman.com
Cyber-Ottoman.com
Cyber-Ottoman.com

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

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

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.

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*!!!

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.

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.

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.

Great post, Thanks!
Another reason to switch from PS to FW :)

very good, I like FW ,more
a boy from china

Have known this for years, thanks for the testing. People often look at me sideways when I mention it. Prefer Photoshop for design then Fireworks to compress.

Ever heard about “PNG-Optimizer” ? For free and the same results ;)

Well, it’s a big deal when you really can save a few KB but on the other hand, I’m not a fan of FW. It doesn’t work the way it is like PS though. I think it’s depends on the designer. Maybe I just need to get use to the FW. *shrug*

…additionally, try to put aside your love for any program when you experiment, I loved PS, and I was skeptical at first, but I got over my Photoshop, Illustrator, Quark complex pretty quickly. Photoshop and Illustrator have real issues with user tools – they’re based on print-based code that is now decades old and you can see how they retrofit their tools with every “upgrade”.

hmss

nice :)

I’d say more experienced designers tend to lean towards photoshop.
It simply does alot more…

Started of and learned FW before PS, it´s great if you need to do things fast, for more complex graphics I find that PS is better even if it takes a bit more time to work with…

Make sure… before you pass off a design to the CSS/HTML Jedi master… that they know the difference. This is a great article. Just send them the link. If they don’t read it then reveal your lightsaber hidden behind your belt.

I never use FW. Over this past year, I’ve opened FW twice and that was by mistake. I’ll have to take another glace at it after reading this article.

i don’t like Fireworks. Photoshop and Gimp are my best companions.

One advantage of Fireworks could be the use of ‘Pages/Frames’ for Slice comp groups (for multi-page templates of a website design), hence outputting from within a single psd/png master file. A feature that photoshop currently lacks.

Haven’t used fireworks enough to confirm this, but suspect it may be capable, can anyone confirm?

Please note: Fireworks and Photoshop have different compression technology. 80% compression rate in Fireworks is relevant to Photoshop 60% compression rate.

What citation(s) do you have for this statement?

About the traffic calculations caused by the wallpaper, i think real world results would be not that dramatic because of the browser’s caching. (or is it really 16000 unique impression per day? :) But of course for high traffic sites, compression should be taken seriously with a proper quality/size/tools research.

Yes – I’ve known this fact for years – It’s the compression algorithm to be more precise. It was designed to export web graphics from it’s creation. Photoshop was not. In fact, Photoshop’s compression algorithm used to be worse, a lot worse, then what your test results have shown.
Nice article.

I do not open Fireworks as often as I should. I have been trying to remind myself more and more to use the software. It has some very handy features.

Thanks so much. Good sharing :)
Ex-Buddy

neat, i will try with some of my images, see if I can save a bit of diskspace and bandwidth on my website

I find the 20kb difference reduction on your png example quite surprising, to my experience the filesize difference is much greater, I do not understand it myself but Fireworks is definitely the way to go, at least for me

I thinks , we have to use both PS an FW for design and slide image, actualy PS for design first and FW for slide images to css

Very nice article Nick!

I think that working in Photoshop and saving images for the web is just easier and more convenient, so we tend to only use this method. (Yes, I am guilty of that)
I do agree that if we actually take that little bit of extra time to optimise all of the images, it will have really measurable results.

Thanks again for the awakening to this.

喜欢你们的设计与技术，常来看看

i dont know about it before, it’s a nice thing

FW is a great tool and i wish more designers would test it …
the mixture of vector and image handling is superb and most of the people that like clean design would really enjoy to arrange the things more faster than in PS ..
Give it a try … :)

I am user of Fireworks. if you are web designer then its better then photoshop and easier. If you are graphic designer then go with photoshop. personally i preffer designing prototype in FW and some effective graphics in photoshop.

I’ve actually never used PS for web design, always used FW simply because I can do things FASTER with it. This is because it works with vector and bitmap at the same time, which is very useful.

what do 20kb help if people still uns pics with 5mb and just scale it down in the browser? i see it all the time…

Everything depends on the type of work that we are going to carry out. If it is a project Web because I advise to use fireworks by its multiple tools and the close relation with dreamweaver. But, if it is a project for impression would be due to use photoshop

I use Fireworks as my primary tool. I am Front-End Developer, so 90% of my work is coding XHTML, CSS and JS, from time to time PHP. I use Photoshop only to hide/show layers, move elements, check font size and color, etc., and then export PSD to PNG (and edit in Fireworks) I can’t even draw a square in Photoshop ;).

I find Fireworks bilion times more _simpler_, faster and useful. It’s a brilliant tool for anyone working betweend PSD designs and code. However it’s understandable that web designers won’t use it – why they should learn two tools, when they can use one. That said, I don’t like bashing Fireworks like it’s some kind of “loosers choice” tool. People doing this are just ignorants.

And what is more, it supports 8bit PNG alpha transparency (search google for more info on that topic).

to Laurence: photoshop can work with both. is called import you can place both type of files in vector or in pixel format it gives you the options to do that.

Very interesting. I tested this myself with PS CS3 (save for web) and FW CS3 (optimize). A photo saved with the same JPEG compression settings resulted in: PS JPEG = 291k, FW JPEG = 142k. Doing the same for GIF was the opposite (although this image isn’t a good gif candidate, few flat colors): PS GIF = 288k, FW GIF = 306k.

I use fireworks because it’s easy to use, and useful for PNG outputs.

What if you Export your images for web on Photoshop??, Im pretty sure they’ll be smaller than Fireworks images but I dont know about image quality hmmm….

I was a Photoshop user until I find Fireworks. Now I use Fireworks for all my website graphics purpose. I use Photoshop for photo editing only :)

I don’t use photoshop

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

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!

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

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

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

Yes I agree with you. I use Fireworks and Photoshop both and I saw this different between them as you explained. Anyway Thanks for sharing information.

Los Angeles Web Design

Hoy I am a designer from Egypt If I win I will give to a friend in US.

And here are 50 more reasons to prefer Fireworks http://www.reinegger.net/50_reasons_not_to_use_photoshop_for_webdesign.html

That’s Great! Thanks for the post!

Hi Richard Lee,
Remember, Nick use Mac OS X to work with this tutorial, and (maybe) you use Windows. I’ve tried this trick on CS4 within Windows and I got a same thing: Fireworks gave me a larger image. This evening I retry the trick with CS5 and JPEG images and it works! It’s really a big deal!
Anyway, thanks for the trick, Nick!

i give you a reason; cause fireworks was made for create websites, and in them we (web designers) need good looking with less kb.

regards!

You can try a free tool named RIOT (Radical Image Optimization Tool), I get a very good quality with around 50% (or more) off the original size.

Fireworks is THE tool for web and screen prototyping and designing. There is simply no reason to use Photoshop which was and always will be a photo manipulation software hence the name Photoshop. For Adobe to remain in business they keep on adding and removing features from Photoshop (and AI etc) but essentially PS has been the same for years.
Fireworks on the other hand as evolved together with the online industry and was always a great companion to Dreamweaver.
No wonder Fireworks still exists and becoming better and relevant by the version, it’s simply a dedicated tool for a specific task and hopefully won’t become a bloated software such as Photoshop and Illustrator.

I must try! Thanks

Fireworks is cool

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…

And then he handed you the thirty-five 45

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.

I will try it now! Thanks!

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.

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.