up

Zoompf's Web Performance Blog

Choosing PNG8 Candidate Images

 Billy Hoffman on February 4, 2010. Category: Optimization
TwitterLinkedInGoogle+FacebookShare

Have you heard about PNG8 yet? No? Well, PNG8 is a PNG image that is used an indexed palette of 256 colors instead of a true color PNG which can support several million different colors. There has already been a number of excellent articles and blog posts written about PNG8. These articles have discussed things about PNG8 such as its benefits, how to create PNG8, and using them across different browsers.

But this article isn’t about any of that.

This article is about how to choose PNG images that are good candidates for converting to PNG8. Historically this has not been an easy or a straight forward decision.

We already know that PNG images can be optimized. Crunching PNGs (using pngcrush, or optipng, etc) to reduce their size is a lossless operation. This process removes unnecessary data chucks like comments and recompresses the DEFLATE streams using tweaked settings. When optimizing images by crunching them none of the image data changes. The number of colors in the image does not change and their color values and hues are exactly the same.

But converting a true color PNG to a PNG8 image is a lossly operation. You lose data. PNG8 images can have at most 256 distinct colors while true color PNGs can have several million. Because of this not all PNG images should be converted to PNG8. Some images look absolutely horrible when converted. Working with our clients we have created two guidelines to evaluate whether a PNG image can be converted to PNG8 without any noticeable loss in quality. This is a easier and scalable solution than converting all of the PNG images on your website and then manually verifying the resulting PNG8 images are acceptable.

Guideline #1: Number of Colors

To understand the impact of limiting a PNG image to only 256 distinct colors we must understand how many colors PNG images typically have. Converting to PNG8 can quite significantly reduce the number of colors in the image. A PNG8 version of a true color PNG image with 1,000 distinct colors has 25% as many colors of the original image. A PNG8 version of a true color PNG image with 10,000 colors has only 2.5% as many colors of the original image! So the number of distinct colors in the image (and thus the number of distinct colors you are destroying when converting to PNG8) has a huge impact on how acceptable the resulting PNG8 will be. In plain terms the PNG8 version of a 10,000 color PNG image will look worse than the PNG8 version of a 1,000 color PNG image.

While true color PNGs can have several million distinct colors they rarely do. (If you have a PNG image that has even a few tens of thousands of colors it should probably be saved as a JPEG instead). Examining a sample set of PNG images we found that PNGs tend to have several thousand distinct colors. We also have found that images containing only a few thousand colors will easily convert to a PNG8 image without any noticeable loss in quality. Consider the Zoompf logo:

The Zoompf logo is a true color PNG image consisting of 1999 distinct colors. That sounds like a lot. Let’s convert this to a PNG8 image using pngquant. Here is the original logo and the PNG8 version of the logo side by side for comparison. The original logo is on the top and new PNG8 version is on the bottom.

Wow, They look virtually identical even though the PNG8 version’s file size is over 50% smaller and uses 87% less colors than the original. Only if you zoom in very close do you start to see some differences. The greens are slightly lighter and the gray in the swoosh lines are a little different.

We have found that images will less than 2500-3000 distinct colors tend to provide the best trade off in terms of maximum reduction in file size without any noticeable difference to quality. This is purely subjective. There are some true color PNG images with 6,000 colors or more that look just fine when converted to PNG8. You should experiment and see what works best for you.

Guideline #2: Image Dimensions

Another factor is the dimensions of the image. Small images, even if they have more than 7,500 distinct colors, convert to PNG8 with not visible loss of quality. This is because your brain has trouble detecting some many similar colors in such a small area. Consider this true color PNG image of a cat.

This picture consists of 8,853 distinct colors. That’s an enormous amount when you realize this image has only 9900 pixels total! Almost every pixel is a completely unique color. That’s tons of distinct colors given the area they are displayed in. Again we use pngquant to convert this cat image into a PNG8 image and compare it to the original. The original image is on the top and PNG8 version is on the bottom.

Again, they look virtually identical even though the PNG8 version’s file size is over 50% smaller and uses 97.2% less colors than the original. As if the logo, only if you zoom in very close you can start to see the differences between the original image and the PNG8 version.

We have found that images less than 100 pixels by 100 pixels, or an image whose area is less than 10,000 pixels can easily be converted into a PNG8 without any noticeable difference in quality. This is a purely subjective guideline. Some larger true color PNG images look just fine when converted to PNG8.

Using the Guidelines

These guidelines can be used separately. A PNG image does not have to be both small and not using many colors to be a good candidate for converting to PNG8. As as example, Graphviz, a program that generates node-and-edge style graphs, regularly produces images that are thousands of pixels wide by thousands of pixels tall. This would violate our image area guideline. However these images usually contain a few hundred colors. This satisfies our color count guideline. Sure enough, converting the output of Graphviz to PNG8 saves a lot of space with no perceivable loss of quality.

PNG8 and CSS Sprites

A lot of times people want to combine PNG8′s advantage of a very small file size with CSS Sprite’s’ advantage of reducing the number of HTTP requests. At first glance this makes a lot of sense. Individual CSS background images inside of the sprite are often small images, fitting our image dimensions guideline. Also CSS background images are often icon-style images used on buttons, toolbars, etc. This means each individual image tends to have only several dozen distinct colors fitting our image colors guideline.

Unfortunately this is looking at the trees instead of the forest. That’s because a CSS Sprite saved as a PNG8 image has to use only 256 distinct colors for all the sub-images inside the sprite. So while each sub-image that makes up the CSS Sprite might look fine as an individual PNG8 image (each with its own 256 color palette) all the sub-images together in a single PNG8 CSS Sprite using a single common 256 color palette could not. This is especially true with gradients and othe graphics that use different shades for color transitions. In fact, Stoyan pointed out a recent article talked about how converting a CSS Sprite to PNG8 caused a very noticeable loss in quality. The solution was the hand edit the PNG8′s 256 color palette to preserve as many shades of the gradient as possible to improve quality.

Summary

There are a lot of blog posts and articles on the Internet about how converting true color PNG images into PNG8 images is an excellent optimization technique. However knowing how to choose true color PNG images that are good candidates to convert to PNG8 can be difficult and time consuming. In this post we provide 2 guidelines to help:

  1. Images with less than 2500 to 3000 distinct colors can usually be converted to PNG8 without any noticeable differences
  2. Image less than 100 pixels by 100 pixels (or an image whose area is less than 10,000 pixels) can usually be converted to PNG8 without any noticeable differences.

Remember that converting to PNG8 is a lossly process. How much loss is tolerable will vary from person to person. You should use our guidelines but also experiment to see if you will tolerate more. Finally, be careful converting your CSS Sprites image into PNG8, especially if you use images with gradients.

Want to see what performance problems your website has? Finding Candidate PNG8 Images based on color count or image dimensions are just two of the 300+ performance issues Zoompf detects when checking your web applications. You can sign up for a free mini web performance assessment at Zoompf.com today!

Comments

    February 4, 2010 at 6:55 pm

    Excellent article!

    I’ll definitely be using this guideline to generate even smaller images :) This will be included in File Conveyor‘s image optimization processor in the next few weeks!

    February 5, 2010 at 2:36 am

    Social comments and analytics for this post…

    This post was mentioned on Twitter by zoompf: PNG8 is awesome but how do you know what to convert? Check out @zoompf’s guidelines & free tool http://bit.ly/c20T0Z #PNG #performance…

    Soroush
    September 19, 2010 at 10:34 pm

    Quote:
    “For images that only have a few colours, like a subtle gradient background, the 24-bit version will usually be smaller than the 8-bit version.”
    Source:http://www.friskdesign.com/2008/03/19/optimizing-png-for-the-web/
    There is a screenshot that prove smaller file size for 163 colors image, could you confirm or comment on that and what is the rule of thumb to use PNG24 or PNG8 in that case?

    Billy Hoffman
    October 27, 2010 at 4:39 pm

    Soroush,

    Good point, there is a very small possibility where a PNG24 of an image could be smaller than a PNG8. That’s because PNG24 stores each pixel of the image in 3 or 4 bytes, whereas PNG8 stores each pixel in 1 byte, but also has to include a color palette inside the image. For some images, it might be possible that, when compressed all together, storing each pixel in 3 or 4 bytes is smaller than storing in 1 byte plus storing the entire color palette. This article just tries to layout some guidelines for web designers to know when they can use a PNG8 without any noticeable loss of quality. They still need to take the step of actually creating a PNG8 and a PNG24 of the image and check which on is smaller.

    Luckily Zoompf can do this automatically for you! Our free web performance scanning service tests the images on your site, sees which ones meet our PNG8 guidelines, converts them to PNG8, and then sees if you get a smaller image. The free performance report than gives you a list of images that should be converted to PNG8 and tells you exactly how much byte savings there will be.

    June 14, 2011 at 11:52 am

    You’re linking to the original decade-old pngquant, which has pretty low quality. I’ve made huge improvements since 1.0, and now you can have PNG8 with much better quality/size (e.g. I was able to shrink your 6KB PNG8 logo down to 3KB with even slightly better quality)

    https://github.com/pornel/improved-pngquant
    pornel.net/imagealpha

    June 14, 2011 at 5:03 pm

    Wow, a better pngquant? Sweet. Thanks for all your work, will take a look at it and compare.

    June 14, 2011 at 5:14 pm

    Do you know if the improved version of pngquant has been integrated into smushit.com? I would be interested to see how it compares to the image compression tool built into Page Speed as well.

    June 14, 2011 at 5:18 pm

    Not sure because I don’t work at Yahoo :-)

    I do know that most of the Yahoo team (Nicole Sullivan, Stoyan, Steve Souders) have left and Smush.it does not appear to be actively developed. :-(

    John
    February 12, 2012 at 10:49 am

    >We have found that images less than 100 pixels by 100 pixels, or an image whose area is less than 10,000 pixels can easily be converted into a PNG8 without any noticeable difference in quality. This is a purely subjective guideline.

    Your finding is based on observation on how many DPI(72, 96, 150 ..etc) displays?

    February 13, 2012 at 2:37 pm

    Great question. Our sample consisted of a majority of 72dpi PNG images.

    We should probably revisit this research, especially in light of the rumors of a retina display iPad or Mac Book Airs.

Comments are closed.