Over 60% of the file size of the average web page is taken up by graphics and multimedia. So graphics optimization is an important step in optimizing web page speed. At an alarming frequency, we have seen large PNG24 and unoptimized JPEGs used on the Web. Large PNG24s should be optimized for file size or converted to PNG8s. This article shows how to optimize PNG files effectively by minimizing their color palettes, and using alpha transparency intelligently.
PNGs were designed to be a superior replacement for the Graphic Interchange Format (GIF). GIFs are limited to 256 colors (8-bit color palette), one level of transparency, and the Lempel-Ziv-Welch (LZW) compression algorithm that was patented by UNISYS. In most cases, PNG files from the same source images are smaller than corresponding GIFs. PNGs use the "deflate" compression algorithm, which is 10 to 30% more efficient than LZW compression.
By design PNGs have some advantages over GIF images. PNGs offer more choices in color depths than GIFs, including 8-bit (256 colors), 24-bit (8 bits per channel), and 48-bit (16 bits per channel) truecolor allowing for greater color precision and smoother transitions. When you add an alpha channel, PNGs allow for up to 64 bits per channel. PNGs can have index color transparency (one color) or alpha transparency (multiple levels) useful for smooth shadow transitions over other images. In summary, the advantages of PNGs over GIFs are:
In a previous article, we discussed how to replace GIF with PNG files for smaller file sizes. You can also optimize PNG24 files for file size by reducing bit depths and the number of colors used. Photoshop and Fireworks offer limited options when optimizing PNG24 files, but there are some third party plugins that offer more control over PNG24 color palettes.
Our volunteer PNG24 comes from NPVetHospital.com, a California client who was kind enough to grant permission to use his site as an example. He came to us concerned that the site was slow to load, even on some broadband connections. The site was designed using large PNG24 images with wide transparent drop-shadows layered over graduated backgrounds. These 24-bit PNGs gave some beautifully smooth transitions around the outer edge of the animals, but were slow to load. While certainly adorable, the puppy image alone weighed in at 676K, giving the home page a weight of well over a megabyte (see Figure 1).
The original image appeared this way in Photoshop (see Figure 2). Note the wide drop shadow around the edge of the hand and puppy. The existence of the drop shadow and the transparency-based design are the reasons why the original designers chose to use PNGs over GIFs. Note that a JPEG, as shown in these figures, reduces to a much smaller file size, but lacks the transparent feature of GIFs and PNGs.
Reducing the original image in Photoshop to a PNG8 produced mixed results (see Figure 3). Note that starting with a layered Photoshop original would give better results: you would avoid requantizing, you could minimize drop shadows, and you could equalize transparent flat areas.
Adding diffusion transparency dither got rid of the non-transparent areas in Photoshop, but the dithering shows once the image is overlaid on the background (see Figure 4).
Saving as a PNG24 (File -> Save for Web) cuts the file size to 292K (by 56.8%), but offers no options for color reduction (see Figure 5).
Fireworks offers more options than Photoshop when optimizing PNG files. For PNG24s, Fireworks offers no color reduction options but reduced our test PNG24 to 243K (by 64%), which is 7 percentage points better than Photoshop. But Fireworks really shines when optimizing to PNG8 files where it allows both alpha and index transparency (see Figure 6).
Unfortunately, the upper part of this drop shadow shows some banding in this svelte PNG8 (see Figure 7).
This version is nearly ideal, however. Let's try adding some dithering and see what happens to the drop shadow (see Figure 8). The banding nearly disappears! This version is 94K.
This dithered alpha dog will hunt. Its drop shadows are smoother now with only a hint of an outer edge. Note that we found a bug in Fireworks CS4 for the Mac. It didn't consistently apply an alpha transparency, while the Windows version worked fine. We've reported this behavior to Adobe.
Web Image Guru is a Photoshop plug-in from VIMAS Technologies that gives you more control when optimizing your images. For PNG24s it allows you to reduce the number of colors in the image using a slider or drop-down menu (see Figure 9). Our sample image went from over 54,000 colors to 900 colors when adjusted to the highest acceptable setting, a quality level of 10. The result is a 132K PNG24 file with perfectly smooth drop shadows, more than 45% smaller than Firewords' best PNG24 effort. However, it doesn't apply dithering as intelligently as Fireworks does to PNG8s.
From the original 676K PNG24 we reduced the image to two acceptable versions:
The PNG24 file was 132K (an 80.5% savings) while the PNG8 file was 94K (an 86% savings, see Table 1). We tried combining the two programs for further optimization but the result, while about 10% smaller, was not quite as smooth as the version using only Fireworks. Overall the home page went from over 1100K to 546K and 506K for the PNG24 and PNG8 versions, respectively.
| Graphics Program | PNG24 | PNG8 |
|---|---|---|
| Original | 676K | N/A |
| Photoshop | 292K | N/A (banded) |
| Fireworks | 243K | 94K (dithered) |
| Web Image Guru | 132K | N/A (banded) |
| WIG + Fireworks | N/A | 83K |
Optimizing PNG files is a matter of reducing colors, maximizing repeated pixel areas, minimizing drop-shadows, and controlling any smooth transitions with a judicious application of dithering. With specialized tools you can reduce source images to a fraction of their original size and still maintain acceptable quality. Our test puppy went from 676K to 94K in file size, some 86% smaller. In some cases, the alpha transparency option in Fireworks for PNG8s allows you to overlay smooth transitions on top of backgrounds without resorting to PNG24 images. If you have to use PNG24s, minimize the number of colors in the image first to minimize file size. Always ask for the original layered Photoshop file when optimizing images. With this original in hand you can reduce drop shadows and avoid requantizing a previously quantized image.
By website optimization on 31 Mar 2010 AM
I was wondering how using something like PNG Optimizer to reduce the file sizes, opposed to using just the built in tools with Photoshop and Fireworks would work out?
Did you look at those?
By: David Mead on April 13, 2010 10:55 PM
Interesting comparisons though running png's through a compression utility, such as pngGauntlet, should shave another 8-15% off the Fireworks file size.
By: mike foskett on April 16, 2010 12:01 PM
Increased speeds by 30-90% with our analysis and optimization services.
Increase conversions with adaptive multivariate testing to squeeze more leads out of your exiating traffic. Quickly boost your ROI.
Improve your site's look, usability and accessibility for a more credible and successful website.
