PNG-8 Vs. PNG-24: There’s a Difference!

In terms of image file formats, which I’ve written about before, there are marked differences between JPG, GIF, and PNG. But there is also a subtler but still noticeable difference in quality between the two levels of PNG files.

Yes, you read that right–PNG has two different levels of quality (PNG-8 and PNG-24), even though they both are identified as “.png” files. The main difference between these two shows up when you try to save a partially-transparent image…and the proof is below!

PNG-8: Something Looks a Bit Fuzzy Here…

(Note: In these examples, the orange shape is the part that will be non-transparent–the dark checkerboard pattern in the background is how Photoshop Elements shows you what parts of the image will be transparent when the image is saved.)

Notice that while the orange shape is mostly “cut out” against the background, the outlines of the shape look “fuzzy;” there are little white bits hugging every edge (graphic artists call these white bits “artifacts”). Now, while you could probably get away with using this image on a white background, a dark background will be very unforgiving indeed. It makes the image look a lot sloppier than it actually is.

PNG-24: Fuzzies Begone!

Look what a change this made, just switching from PNG-8 to PNG-24! Now all the outlines of the orange shape are clean-cut–no fuzzy image artifacts anywhere. The file size is about double the PNG-8’s size (11.71 KB instead of 6.446 KB), but it’s a small price to pay for a much better image result.

But Wait, PNG-8 Isn’t All Bad!

I will say that PNG-8 is a great file format for saving Internet screenshots, and for making web graphics that don’t require transparency. In fact, the two illustrative screenshots shown above are saved as PNG-8. But PNG-24 just does transparency so much better and cleaner. If you’re making a partially-transparent image and you have the option to save it as a PNG-24 file format, why not?

3 thoughts on “PNG-8 Vs. PNG-24: There’s a Difference!”

  1. With Photoshop CC (2015) it’s seems that Adobe have made a major update with their algorithm and the 8 bit png looks almost as good. No fuzzy outline.

  2. Awesome! That’s great to hear 🙂 I’m still using Photoshop Elements 8.0, but if I can ever upgrade, that will be a recommendation to keep in mind!

Leave a Reply

Your email address will not be published. Required fields are marked *