Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
I was wondering what is the difference between PNG and PNG8?
Is there any difference between PNG and PNG8 in image quality? Why would I want to use PNG8 over PNG and vice versa? Lets say I draw an image in Photoshop. Does PNG mean that I will get the same pixels that I drew in Photoshop 1 to 1?
The PNG specification only defines "png", which can come in a variety of different bit depths and color types (RGB, RBGA, Gray, Gray-alpha, indexed). The "PNG8" nomenclature is simply a convenient way of referring to an indexed (8-bit pixels) image. ImageMagick, for example, uses PNG8, PNG24, PNG32, PNG48, and PNG64, to identify 8-bit indexed with binary transparency, 24-bit RGB, 32-bit RGBA, etc. I'm not sure whether PhotoShop's definition limits PNG-8 to binary transparency or not. A PNG8 is limited to 256 palette entries, while a PNG24 can have 16 million different colors.
Chances are that this is a duplicate question, but it's easier to just answer than to search for dupes. I'll do that now...
OK there are 29 questions about PNG8 in this site, and 542,000 questions throughout StackExchange, probably mostly dupes of this one.
Perhaps you meant PNG-8 and PNG-24?
There are two PNG formats: PNG-8 and PNG-24. The numbers are shorthand for saying "8-bit PNG" or "24-bit PNG." Not to get too much into technicalities — because as a web designer, you probably don’t care — 8-bit PNGs mean that the image is 8 bits per pixel, while 24-bit PNGs mean 24 bits per pixel.
To sum up the difference in plain English: Let’s just say PNG-24 can handle a lot more color and is good for complex images with lots of color such as photographs (just like JPEG), while PNG-8 is more optimized for things with simple colors, such as logos and user interface elements like icons and buttons.
When you need to preserve transparency and large amounts of color, as well as achieve full or partial transparency, the PNG image format is the best.
Since it’s a lossless format, images saved using the PNG format aren’t going to be small all the time, but because PNG stores a lot of additional data, you can easily optimize images for web usage to reduce file sizes.
PNG24 supports millions of colors. PNG8 only supports up to 256 colors.
That's why PNG8 files are so much smaller. If your images look OK in PNG8, use it. If the colors look grainy, use PNG24.
You should be aware of a few key factors...
There are also different colour depths (palettes): Indexed color and Direct color.
PNG-8 - Lossless / Indexed
PNG-8 can only store 256 colours, like GIFs, it is really a good replacement for GIFs because (although animation isn't as supported), it adds Alpha Transparency (see below for a comparison).
PNG-24 - Lossless / Direct
PNG-24 is a great format that combines Lossless encoding with Direct color (ie. thousands of colours, just like JPEG). Unfortunately PNG-24 files will still be bigger than JPEGs (for photos), and GIFs/PNG-8s (for logos and graphics), so you still need to consider if you really want to use one.
Even though PNG-24s allow thousands of colours while having compression, they are not intended to replace JPEG images. A photograph saved as a PNG-24 will likely be at least 5 times larger than a equivalent JPEG image, with very little improvement in visible quality. (Of course, this may be a desirable outcome if you're not concerned about filesize, and want to get the best quality image you can.)
Just like PNG-8, PNG-24 supports alpha-transparency, too.
I hope that helps!
PNG-8 is a lossy format compared to PNG-24 which is lossless
