What is difference between png8 and png24

Question

I want to know about uses of png files. There are two formats available for png images; one is png8 and the another one is png24.

I would like to know that if I use either type in my html page, will there be any error? Or is this only quality matter?

Stutter

PNG8 uses very less colors than PNG24. And yes quality matters. – Melyndamem

There are more. If you add an alpha channel, for full transparency, you'd get png32 – Chase

Answer 1

There is only one PNG format, but it supports 5 color types.

PNG-8 refers to palette variant, which supports only 256 colors, but is usually smaller in size. PNG-8 can be a GIF substitute.

PNG-24 refers to true color variant, which supports more colors, but might be bigger. PNG-24 can be used instead of JPEG, if lossless image format is needed.

Any modern web browser will support both variants.

Pharmacopsychosis

"Is smaller", well, actually you need to store the palette. There must be a "minimal size" where an 8-bit image, using 256 colors, is actually bigger than the exact same colors in 24-bit encoding. (Sorry, too tired to do the maths.) – Trott

@Trott True, wording may have been too strict. But in general case, the image must be small with many different colors for this to happen, and usually differences are small. – Pharmacopsychosis

Answer 2

From the Web Designer’s Guide to PNG Image Format

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.

Another difference is that PNG-24 natively supports alpha transparency, which is good for transparent backgrounds. This difference is not 100% true because Adobe products’ Save for Web command allows PNG-8 with alpha transparency.

Bloodsucker

Answer 3

You have asked two questions, one in the title about the difference between PNG8 and PNG24, which has received a few answers, namely that PNG24 has 8-bit red, green, and blue channels, and PNG-8 has a single 8-bit index into a palette. Naturally, PNG24 usually has a larger filesize than PNG8. Furthermore, PNG8 usually means that it is opaque or has only binary transparency (like GIF); it's defined that way in ImageMagick/GraphicsMagick.

This is an answer to the other one, "I would like to know that if I use either type in my html page, will there be any error? Or is this only quality matter?"

You can put either type on an HTML page and no, this won't cause an error; the files should all be named with the ".png" extension and referred to that way in your HTML. Years ago, early versions of Internet Explorer would not handle PNG with an alpha channel (PNG32) or indexed-color PNG with translucent pixels properly, so it was useful to convert such images to PNG8 (indexed-color with binary transparency conveyed via a PNG tRNS chunk) -- but still use the .png extension, to be sure they would display properly on IE. I think PNG24 was always OK on Internet Explorer because PNG24 is either opaque or has GIF-like single-color transparency conveyed via a PNG tRNS chunk.

The names PNG8 and PNG24 aren't mentioned in the PNG specification, which simply calls them all "PNG". Other names, invented by others, include

• PNG8 or PNG-8 (indexed-color with 8-bit samples, usually means opaque or with GIF-like, binary transparency, but sometimes includes translucency)
• PNG24 or PNG-24 (RGB with 8-bit samples, may have GIF-like transparency via tRNS)
• PNG32 (RGBA with 8-bit samples, opaque, transparent, or translucent)
• PNG48 (Like PNG24 but with 16-bit R,G,B samples)
• PNG64 (like PNG32 but with 16-bit R,G,B,A samples)

There are many more possible combinations including grayscale with 1, 2, 4, 8, or 16-bit samples and indexed PNG with 1, 2, or 4-bit samples (and any of those with transparent or translucent pixels), but those don't have special names.

Boigie

Answer 4

Basic difference : a 8-bit PNG comprises a max. of 256 colors. PNG-24 is a loss-less format and can contain up to 16 million colors.

Impacts:

1. If you are using any round corner image then edges might visible in png8 format.
2. ie6 doesnt support png24 format.

Backache

PNG-8 is "lossless" too assuming you started with only 256 colours, ... and PNG-24 would be "lossy" if you started with more than 16 million colours. In fact the lossy / lossless distinction is really about whether the compression scheme (if any) is lossy / lossless. – Schooling

Yes you right Era, edges not looking good in png8. I have found the example Here – Stutter

That is simply a User Error (or Software Fail, choose what you want). The "8-bit" sample image does not use the full 8 bits of transparency that the PNG format allows. – Trott

Answer 5

The main difference is that a 8-bit PNG comprises a max. of 256 colours, like GIFs. PNG-24 is a lossless format and can contain up to 16 million colours.

Zitella

Sure. But 8-bit PNG is also a lossless [compression] format, so no need to specify that. Oh, and so is GIF. – Trott

Answer 6

While making image with fully transparent background in PNG-8, the outline of the image looks prominent with little white bits. But in PNG-24 the outline is gone and looks perfect. Transparency in PNG-24 is greater and cleaner than PNG-8.

PNG-8 contains 256 colors, while PNG-24 contains 16 million colors.

File size is almost double in PNG-24 than PNG-8.

Josh