Recently, at my work, we had an issue about whether or not to use Fireworks or Photoshop to optimize graphics and images for the web. We have the CS3 Suite so we are up to date with the newest software. The issue was that our design department uses Photoshop to create their designs for email campaigns and sub site projects. I, on the other hand, have been using Fireworks to design and optimize my graphics for my sites for the last seven or eight years. I knew from experience that Fireworks optimized graphics better.
But I had to prove it.
So I did some tests and found that, as I thought, under the same optimization settings of 80% for a .jpg image the Fireworks image file size was smaller than Photoshop’s. For the two images below the Photoshop image is 97.5KB and the Fireworks image is 52.9KB. The original was 219KB. Pretty impressive! Fireworks shaved off 44.6KB more than Photoshop.
Original 219KB:
Photoshop 97.5KB
Fireworks 52.9KB:
There are people who will say that optimizing settings are subjective and you need to treat each graphic differently. They will say that they will tweak the graphic over and over until you get right to the edge of the image degrading enough that it doesn’t look like the original. So they will take the percentage settings and go down one percentage point until they get to where they think the file size is small enough but the image still looks good to them. While this sounds good (squeezing every last kilobyte out of the graphic) it is a tedious process if you are working on a site or project that will have dozens or hundreds of images. Plus, you are depending on that individual’s perception of how the graphic looks to them. And, as we all know, everyone sees things differently. And, if that isn’t enough, the difference between monitor settings and even LCD and plasma screens is impossible to get consistency with. So, I do what most Web Design Professionals I know do, I set up a generic standard for optimizing different types of graphics. Below are the guidelines that I use and that we instituted as standards at my place of work for optimizing in Fireworks:
JPEGs Use
75% quality should be used for basic gradients
80% quality should be used for complex graphics
83% quality should be used for photography
GIFs Use
Quality should be set at 256 colors
Web Adaptive
PNGs Use
32 bit exportation, for transparency only
In the end the better tool seems to still be Fireworks. In a head to head matchup with Photoshop it wins. But how you decide to optimize your graphics is up to you. Find an optimization standard setting that works for you for different file types (jpg, gif, png) and use it consistently.