Oct 30
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.
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.
iPhone App Site Design Trends 5 Simple, But Useful CSS Properties
Comments
Pages: 27 26 25 24 23 22 21 20 19 18 17 … 1 » Show All
There are 266 comments (+Add)
Pages: 27 26 25 24 23 22 21 20 19 18 17 … 1 » Show All
266 Jud
March 10th, 2010 at 10:49 am
I use Photoshop to design and Fireworks to optimize, for me, the best option
265 Jud
March 10th, 2010 at 10:48 am
I use Photoshop to Fireworks to design and optimize, for me, the best option;)
264 sbobet http://www.sbobet-th.com
March 4th, 2010 at 3:35 am
Work is not different. Based on competency of users.
263 andy
February 26th, 2010 at 5:54 pm
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.
262 CB
February 26th, 2010 at 4:52 am
Is this with the Photoshop “save for web and devices”, or just by clicking ’save’?
261 capsiplex http://www.capsiplexzayiflamahapi.net/
February 23rd, 2010 at 5:34 pm
I mainly use Photoshop but I have always been disappointed and frustrated with the PNG export.
260 Simon http://szymoncofalik.pl
February 20th, 2010 at 11:42 am
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).
259 Marcos
February 11th, 2010 at 9:26 am
Another great tool which can serve as a “file size reducer” is IrfanView (http://www.irfanview.com/). You have many options and it is really easy to use and the fastest program for images I’ve ever used. For ppl who work with web it is a pain to open up PS just to scale something down or crop it.
258 diseño web http://www.trazavirtual.com
February 7th, 2010 at 9:19 am
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
257 Roppa http://www.whiteforest.co.uk
February 3rd, 2010 at 5:01 am
I mainly use Photoshop but I have always been disappointed and frustrated with the PNG export. Really good information here; I will definitely have to start using Fireworks.