Best Use of PNG Web Images: 8-bit vs. 24-bit

Website images are one of the most important elements that will keep your visitor’s attention and help direct them through your content. Our eyes are naturally drawn to images, and using high quality imagery on your website is a good way to get more visitors, more conversions, and more email opt-ins.

There three main image formats used on websites are JPEG, GIF, and PNG. Each one has it’s distinct advantages, but the PNG format allows much more flexibility for creating palette-optimized images and images with transparent backgrounds.

What is a PNG image?

The Portable Network Graphics format was built as an alternative to the GIF format, and uses a lossless compression known as DEFLATE, similar to zip and gzip files.

Because PNG images are lossless, they result in a larger file size than the JPEG format when used for photographs. But when used for graphics that have a smaller color palette, it results in a file size much smaller than a JPEG and usually smaller than a GIF.

The big advantage that PNG images have over the GIF format is the ability to use an alpha chanel for opacity.  Where GIF transparency is either on or off, PNG images can have any percentage of alpha transparency, from 0 to 100%. This allows the designer to create a lot of different overlay effects.

When the PNG format was first introduced, a lot of browsers did not support the alpha opacity channel natively and designers had to incorporate third-party code and scripts to achieve the proper effect.

Today, all browsers support PNG transparency and including hacks for old browsers is really no longer required.

PNG Color Depth: 8-bit vs. 24-bit

PNG images can be created using either 8-bit or 24-bit color palettes.

The 8-bit version supports up to 256 colors and uses binary transparency which means it’s either on or off, just like a GIF.

24-bit PNG images can have up to 16 million colors and support the alpha channel transparency. They are technically 32-bit images, with the extra 8 bits required for the alpha channel.

The PNG-24 format produces great images, but for line art and logos with limited color palettes, it will result in a larger file size as compared to using the PNG-8 format.

Examples of 8-bit and 24-bit PNG Formats

A picture is worth a thousand words, so it’s best to show you examples of the two types of PNG formats and how they differ in application.

png-8-32-nodither32 Colors
No Dither
Size: 4.56 Kb

png-8-64-nodither64 Colors
No Dither
Size: 5.55 Kb

png-8-256-nodither256 Colors
No Dither
Size: 8.72 Kb

PNG Images with Transparency

256 Colors
No Dither
Size: 8.87 Kb

256 Colors
Transparency Dither
Size: 7.98 Kb

16 Million Colors
Transparent
Size: 24.6 Kb

 

Comparison of 8-bit 256 color with 24-bit Image

Compare PNG-8 to PNG-24

The image above is comprised of enlargements of the PNG-8 256 color and PNG-24 images. No transparency was used for either image, hence the difference in file sizes from the prior images.

To help illustrate when to use a JPG instead of a PNG, the above image as a JPG format is about 70 Kb. As a 24-bit PNG format, it would have been over 127 Kb.

Which would you use on your site? Is the slightly higher quality PNG-24 image worth the extra ~13 Kb required to download?

At 300% zoom it’s pretty easy to tell which version is better, but what about at the actual size below?

png-comparison-small

Not quite as easy to tell is it? The left half is still only 256 colors and the right half is 16 million.

This is where the designer has to make a judgement call of quality vs. size. In this case, if no transparency was needed, the 8-bit image at 256 colors would probably suffice. But if transparency was a requirement, the only real option is the 24-bit image due to the subtle drop shadow in the image.

But if there was no drop shadow, this is what the transparency would look like for each version:

png-comparison-on-black

In this case, the 24-bit version is the right image to use. Remember that 8-bit transparency is either on or off, there is no middle ground. So that can result in the white pixels around your image when using 8-bit transparency.

The edges of bitmap images contain both opaque and partially-transparent pixels (called anti-aliasing) to give a smoother appearance to curves and diagonal lines. When the image is saved as an 8-bit PNG, the partially-transparent pixels are either made completely transparent or completely opaque. This results in the effect you see above in the left panel.

The background behind the image helps dicate which PNG format will work best. The 8-bit image above would work fine on a white or very light background, as the extra white pixels would blend in. For a darker background, the 24-bit version would need to be used for optimal appearance.

Bonus Tip: PNG Optimization

Here are two methods for turning 24-bit PNG images into 8-bit images with alpha channel support.

TinyPNG

There is a nifty online service and Photoshop plugin from TinyPNG that compresses and optimizes PNG images. It takes 24-bit PNG images and compresses them down to 8-bit files while retaining full alpha transparency.

tinyPNG

Here’s an example. The image optimized with TinyPNG is on the left and the original 24-bit image is on the right (300% enlarged):

TinyPNG Optimized

You can see slight banding of the 8-bit image on the left, but the file size is 71% smaller than the original. The 8-bit image retains full transparency like the 24-bit version, so it can be used on any color background without the white edge pixels showing.

You can upload and optimize your files for free on the TinyPNG website or purchase the plugin for bulk processing in Photoshop.

Photoshop CC

The other PNG optimization tool you can use is built into Photoshop CC. If you are using the Creative Cloud version of Photoshop, there is an option to output an image as a PNG, but then just check the ‘Smaller File (8-bit)’ option. This outputs a file optimized with an 8-bit color palette, but with full alpha channel support.

Photoshop 8-bit PNG

This results in a file size very similar to using the TinyPNG plugin.

Wrap Up

Whether you use 8-bit or 24-bit PNG images really just depends on:

  1. The composition of the image (line art vs. photos)
  2. The background of the image if using transparency
  3. Desired final image size

If you find that an image is just too large at a particular color depth, there are other options for 8-bit PNG images that dither the colors in various ways to create the illusion of a broader color palette. You may be able to get by with a 32-color 8-bit image instead of a 64 or 128-color image when using dither.

You also may find that a JPG or GIF format is best for a particular application. Larger photos are almost always smaller as a compressed JPG file than a 24-bit PNG format. Depending on the subject matter, it can be very difficult to tell the difference between JPGs output at 50% quality and 100% quality. Yet other images may show distinct pixelation and ‘artifacts’ in the image at 50% quality.

In summary, the image format you choose really just comes down to a balance of image quality and image size. You want to give your users the best visual experience, but at the same time you do not want to force them to wait for large images to download.

Enjoy the Read? Share some Love!