Call (877) SITE-OPT (748-3678)

PNG24 and PNG Optimization

Summary: Which program is the alpha transparency dog of PNG optimization? We put the front runners of the photo optimization pack through their paces.

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.

PNG vs. GIF

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:

  • Alpha channels (multilevel transparency)
  • Variable bit depths
  • Cross-platform gamma and color correction
  • Two-dimensional interlacing
  • More efficient lossless compression (LZ77 vs. LZ78+)

PNG24 and PNG Optimization

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.

Sample PNG24: NPVetHospital.com

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

Figure 1: NPVetHospital.com Original Home Page

NPVetHospital.com Original Home Page

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.

Figure 2: PNG24 in Photoshop

NPVetHospital.com Original Home Page PNG24

Photoshop to PNG8, No Dithering

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.

Figure 3: PNG8 in Photoshop

PNG24 to PNG8 in Photoshop

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

Figure 4: PNG8 in Photoshop with Diffusion Transparency Dithering

PNG8 in Photoshop with diffusion transparency dithering

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

Figure 5: PNG24 in Photoshop

PNG24 in Photoshop 292K

Fireworks and PNG Optimization

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

Figure 6: PNG8 Optimization in Fireworks

PNG8 optimization in Fireworks

Unfortunately, the upper part of this drop shadow shows some banding in this svelte PNG8 (see Figure 7).

Figure 7: Fireworks PNG8 with Alpha Transparency

Fireworks PNG8 with Alpha Transparency 76K

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.

Figure 8: Fireworks PNG8 with Alpha Transparency and 100% Dithering

Fireworks PNG8 with Alpha Transparency and 100% Dithering

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.

Optimizing PNGs with Web Image Guru

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.

Figure 9: Web Image Guru Optimizing a PNG24

Web Image Guru optimizing a PNG24 with Color Reduction 132K

Final Results

From the original 676K PNG24 we reduced the image to two acceptable versions:

  • An optimized PNG24 file using Web Image Guru
  • An optimized PNG8 file using Fireworks CS4

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.

Table 1: PNG Optimization Results
Graphics ProgramPNG24PNG8
Original676KN/A
Photoshop292KN/A (banded)
Fireworks243K94K (dithered)
Web Image Guru132KN/A (banded)
WIG + FireworksN/A83K

Conclusion

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.

Further Reading

Adobe
Makers of Photoshop and Fireworks.
Average Web Page Size Triples since 2003
Within the five years since 2003, the size of the average web page has more than tripled, and the number of external objects has nearly doubled. While broadband users have experienced somewhat faster response times, dial-up users have been left behind.
Graphic Optimization
Tutorials on optimizing web graphics for minimum file size.
NPVetHospital.com
This Yuba City, California veterinarian provided the sample PNG24s to optimize.
Optimize Drop Shadows
Learn how to create optimized drop-shadows in Photoshop to minimize the size of web graphics.
PNG Alpha Transparency - No Clear Winner
A tutorial on including transparency in PNG files by Dave Artz.
Replace GIF with PNG Images
PNGs are designed to be a more efficient, flexible, and patent-free replacement for GIFs. By replacing your GIFs with PNGs you can speed up your web pages and save bandwidth.
VIMAS Technologies
Makers of the Web Image Guru plug-in for Photoshop.

By website optimization on 31 Mar 2010 AM

Copyright © 2002-2013 Website Optimization, LLC. All Rights Reserved - Free website speed test - Privacy Policy
Last modified: August 26, 2013.

Follow us on: Twitter, Google+, Facebook, Linked In