The subject of image optimization always crops up during my seminars, and one of the “oh, wow!” moments for almost everyone in the audience is when I compare JPEG optimization from our beloved Photoshop and Fireworks. As everyone who has seen this knows, we get a much smaller JPEG out of Fireworks. But for those of you who have not had the chance to check this out, I wanted to document it here.
To follow along, you should find your favorite uncompressed picture, or if that’s too difficult to find, you can download my RAW image – even if you try this with a compressed JPEG, you’ll still see a dramatic difference. But the optimal workflow is to start with the highest quality possible. I always shoot in the Raw format for many reasons – not the least of which is that I get that completely uncompressed image. If you have a Raw image, you’ll first make any desired adjustments in Camera Raw and then open it in Photoshop CS4.
Save the file as a PSD, since we’ll need it in a few moments. And if you’re working with a RAW image, that means that you’re probably dealing with a rather large image size – my image is a 12 megapixel shot. For this example, I’ve scaled it down to 350 x 233. In order to get the smallest possible JPEG out of Photoshop, it is important that you do NOT try a “Save As” and select JPEG. Instead, we need to go through the “Save for Web and Devices…” process (in the File menu).
For the purposes of this demonstration, I’ve chosen to export my image as follows:
You’ll notice that I have selected a JPEG with a quality of 80. But in order to get an even smaller image, you’ll notice that I added a Blur amount of 0.25. This slight softening of the pixels is invisible to you and I, however, it allows the JPEG compression algorithm to crush the image a bit more – typically about 10% savings in file size. Finally, you can also see that I have removed all Metadata from the image. The default of “All” results in approximately 12K of metadata information being embedded in the image.
The result of the export from Photoshop looks great and weighs in at 45KB. Obviously, if this were really going to be used in a site, we could have taken the quality down further to achieve a smaller size.
Now, we’ll open the same PSD file in Fireworks (and no, we’re not talking about any specific version – even Fireworks MX will achieve the following results). Fireworks allows us to specify export settings at any time through the Optimize panel. I’ve specified the exact same JPEG quality of 80% as you can see.
In Fireworks, the Blur setting is called Smoothing but I’ve left it at 0 instead of adding the 0.25 that we used in Photoshop. I could add this in Fireworks to achieve an even smaller export, but didn’t in this example. For those who might be new to Fireworks, you can find the Export command under the File menu. Outputting the image achieved the following result.
As you can see – or perhaps more appropriately, as you can’t see – there is no visual difference between the Photoshop export and the Fireworks export. However, there is a very definite difference in size. The Fireworks export is only 29KB – a 36% smaller image! In fact, I’ve seen size differences of up to 48% between Photoshop and Fireworks – so depending upon the image, it can be quite dramatic. Remember that the size difference only applies to JPEG images – in other words, GIF or PNG images exported from the two applications are essentially the same size. (Also, as I was writing this, I noticed that the Fireworks image seemed a bit lighter – however, this is due to my monitor. When I scrolled the image up further, ie to the same place as the Photoshop image was appearing on screen, the Fireworks image darkened. So, feel free to download both images and look at them side-by-side and you’ll see that there is no brightness difference between them.)
Obviously, this brings us to the final question – why isn’t this compression available in Photoshop? There are numerous historical reasons behind the difference, such as the fact that Fireworks was originally created by Macromedia specifically for web production. However now that we are one company, I unfortunately don’t have a good answer for you, other than to say that I have made the Photoshop team aware of the issue. Here’s hoping that we’ll see better (smaller) exports from Photoshop in the future. Until then, if you want your JPEGs as small as possible, send them through Fireworks.