PNG-8 vs PNG-24: what the numbers mean

Short answer

PNG-8 stores a table of at most 256 colours and one byte per pixel saying which entry to use. PNG-24 stores a full red, green and blue value for every pixel, and cannot hold transparency; the version that can is PNG-32, which adds an alpha byte. The 8, 24 and 32 are bits per pixel. PNG-8 is the right small answer for flat artwork, icons and many cutouts, and the wrong one for a smooth gradient or a soft hair edge that needs more shades than the table has room for.

PNG-8 and PNG-24 are not two formats. They are two ways of laying out the same format, and the numbers are bits per pixel: a PNG-8 spends eight bits on each pixel, a PNG-24 spends twenty-four. That difference is the whole reason one file can be a quarter of the size of the other, and also the whole reason the small one can look worse. This page explains what each number means, what each does to a soft transparent edge, which one a cutout belongs in, and when the small one is the right answer.

One correction first, because it decides which file you want. A PNG-24 has no transparency at all. The 24 is eight bits of red, eight of green and eight of blue. The kind that holds a cutout is PNG-32, which adds eight bits of alpha. Many tools still say 24-bit PNG with transparency when they mean that, and one site’s rule, Zoom’s request for a 24-bit PNG, means a PNG with no alpha. If a size or a cutout is the problem, reducing a PNG’s file size goes through the tools, and this page is the part that explains why they work.

The three layouts in one table

The names come from editors and not from the PNG specification, which talks about colour types and bit depths. They are still the names you will meet in an export dialog.

Name	What each pixel stores	Colours it can show	Transparency
PNG-8	One byte: a position in a table of up to 256 colours	256 at once, chosen per file	Only through the table (see below)
PNG-24	Red, green and blue, one byte each	About 16.7 million	None
PNG-32	Red, green, blue and alpha, one byte each	About 16.7 million, each with 256 levels of opacity	Full, soft edges

The row that matters for a cutout is the last. PNG-24 cannot be one. The other two can, in different ways, and the difference between those ways is where the trouble starts.

How PNG-8 gets its size

A PNG-8 stores two things. The first is a colour table, called a palette: up to 256 entries, each a red, green and blue value. The second is one byte per pixel, which is not a colour but a number from 0 to 255 saying which table entry that pixel uses. To draw the picture, the viewer looks each number up.

The arithmetic shows why this is small. Take a picture 1,000 pixels wide and 1,000 tall, a million pixels:

PNG-32 starts with four bytes a pixel, so 4,000,000 bytes before compression.
PNG-24 starts with three, so 3,000,000.
PNG-8 starts with one, so 1,000,000, plus a table of at most 768 bytes for the colours and up to 256 more for transparency.

The format then compresses those bytes with deflate, as the lossless compression guide explains, but the starting point is already three or four times lower. That is the saving everyone is after, and it is why reducing a PNG’s colours is the step that pays most. The same page puts pngquant’s claim of often up to 70 percent beside TinyPNG’s description of turning 24-bit PNGs into much smaller 8-bit indexed images.

The cost is equally plain. A picture with more than 256 distinct colours has to be mapped on to 256. Choosing which 256, and which pixel gets which, is called colour quantisation. A flat logo with twelve colours loses nothing. A photograph with a hundred thousand colours loses a great deal, and the question is whether anyone can see it.

What each does to a soft edge

A cutout’s edge is not opaque or transparent. It is a ramp: pixels that are 100 percent solid in the middle of the subject, fading through every level of opacity to nothing at the outside. Hair and fur are mostly that ramp. The alpha channel guide shows what those in-between values are.

PNG-32 keeps the ramp exactly. Each pixel has its own alpha byte, so the edge can use all 256 levels at every pixel.

PNG-24 has nothing to keep. It cannot hold a ramp or a hard cut-out edge, so a tool that saves a cutout as PNG-24 has either put it on a colour or dropped the transparency.

PNG-8 can keep the ramp, but it pays for it out of the same 256. The format lets each table entry carry an alpha value as well as a colour, so one entry can mean a dark brown at 40 percent opacity. The catch is that each combination of colour and opacity is its own entry. A soft edge of one colour that fades through forty distinct levels needs forty entries by itself, and that leaves 216 for everything else. A picture with a smooth gradient inside the subject and a long soft edge outside it is competing for the same table.

There is also a worse case. Some tools, when asked for PNG-8 with transparency, write only on or off: a pixel is either fully see-through or fully solid. That is the transparency a GIF has, and it turns a soft edge into a jagged outline with a halo of the old background colour. Adobe’s own Photoshop setting is a known example: the Smaller File (8-bit) export option makes a palette PNG, which the Photoshop guide warns can turn soft hair edges hard. If a PNG-8 export looks worse around the edge than the original, that is the first thing to suspect.

A good compressor does the opposite. It counts the alpha as part of the colour from the start, so the table is spent where the picture needs it, and the edge keeps its steps. That is what getPNG’s compressor does: it writes an indexed PNG with alpha carried in the table, so a cutout keeps a soft edge, and a picture with no transparency is not given any.

What each does to a gradient

Edges are one risk. Gradients are the other.

A smooth sky, a studio backdrop or the shading on a cheek moves through hundreds of nearly identical shades. With 256 entries to share, the picture is forced to use the nearest available one, and the eye sees the result as banding: visible steps where there should be a smooth slide. PNG-24 never bands, because it never approximates.

The remedy is dithering: scattering pixels of two neighbouring table colours so that, from a normal distance, they blend into the shade between. It trades visible bands for fine grain. getPNG’s compressor has a Smooth gradients switch for this. A flat logo does not need it, and with it off a flat area stays perfectly flat.

How many colours does a picture really need

The right palette is the smallest one that matches the picture, and it varies a lot:

Flat artwork, a logo, an icon, a screenshot. Often sixteen colours, or a few dozen. The result looks identical to the original at a small fraction of its size.
A cutout of a product with solid colours. Usually somewhere between a few dozen and 128, plus whatever the edge needs.
A photographic cutout with hair. Usually the full 256, and the edge is where you check.
A photograph with no transparency. 256 is not enough to be invisible. It belongs in PNG-24 if it must be lossless, or better in a JPG.

getPNG’s compressor does this per file: it asks what 256 colours would achieve on that picture and takes the smallest palette within a tenth of it, so flat artwork lands on a small one and a photograph on 256. Reducing an image’s file size, lever by lever puts that step in order with the others.

Find where the small one stops being enough

Pick two PNGs: a flat logo or screenshot, and a photographic cutout with a soft edge such as hair.
Drop both on /compress-png. Note the size it reports and the number of colours it chose for each.
Zoom to 200 percent on the soft edge of the cutout, original beside result. Then turn Smooth gradients off and on and look at any smooth area.

You should see: the logo drops to a small palette and looks identical, at a fraction of the size. The cutout takes a palette near 256, and its edge keeps its soft steps, with only fine grain where a gradient was.

If you do not: if a file comes back unchanged, it was already as small as a colour table could make it, which is the result the page is designed to report honestly. If an edge looks stepped, the picture needs more colours than the table has: keep the PNG-32 original.

When PNG-8 is the right answer

Choose the small one when all of these are true:

The picture has few distinct colours, or a subject whose colours are the same family.
Nothing in it is a long smooth gradient, or the gradient is small.
Any transparent edge is short or hard anyway, or the tool you use keeps alpha in the table.
The file is going somewhere that rewards size: a web page, an email, an upload form with a limit, or a batch of icons.

That covers more pictures than people expect. Icons, interface graphics, charts, screenshots and logos almost always belong in PNG-8, and many product cutouts do too.

When PNG-24 or PNG-32 is the right answer

Stay with the full-colour layout when:

It is a master. You will edit it again, print it, or send it to a print shop, where a table of 256 colours has already thrown information away. PNG for shirts is the clearest case: upload the full file and compress only the copy you share.
It is a photograph or a gradient. Banding is the price of 256 colours, and dithering only hides it.
The edge is the point. Fine hair or smoke against a similar colour needs many levels of opacity, and a table has to share them with the colours.
It will be resized or edited later. Any later operation starts from the approximated colours, so errors compound.

If it needs transparency and has to be full colour, the format you want is PNG-32. For a web page, WebP is usually smaller still and keeps a full alpha channel.

Telling which kind you have

A few checks, none needing special software:

The size on disk. A PNG of a flat logo a few kilobytes in size is almost certainly indexed. A 12-megapixel cutout in a few megabytes may be.
The editor’s export dialog. Many editors name the layout when you save, with a bit depth or palette option.
The picture itself. Zoom in on a gradient. Visible steps mean a table; smooth means full colour.
Whether it is transparent at all. A PNG that looks see-through in a viewer but shows a white box on your page may not have transparency, which the fake transparent PNG guide shows how to tell.

The lazy test is the best: open the file in the compressor and read what it chose. If it returns the file untouched, it was already as small as a table could make it.

The free way

Let it choose the table

getPNG’s compressor writes the smallest PNG-8 that still matches the picture, per file, keeps a cutout’s soft edge, never resizes it and never returns a file larger than the one you gave it. A whole folder at once, with nothing uploaded. It changes pixels slightly, so keep the original if you need an exact copy.

Your photo never leaves this device.Compress a PNG

The short version

The numbers are bits per pixel. PNG-8 stores a table of at most 256 colours and one byte per pixel, which makes it a quarter to a third of the raw size and puts a ceiling on gradients and soft edges. PNG-24 stores every colour exactly and has no transparency; PNG-32 adds alpha and is the faithful form of a cutout. Use the small one for flat artwork, icons and cutouts that survive the table, keep the full one for masters and photographs, and check the edge at 200 percent before trusting either.

Questions

What is the difference between PNG-8 and PNG-24?

PNG-8 keeps a table of up to 256 colours and stores one byte per pixel pointing into it. PNG-24 keeps eight bits each of red, green and blue for every pixel, about 16.7 million possible colours, with no table. PNG-8 is much smaller; PNG-24 never has to approximate a colour.

Does PNG-24 support transparency?

No. The 24 counts red, green and blue only. A PNG with a transparent background and full colour is PNG-32, which adds an eight-bit alpha value to each pixel. Tools often still call that kind 24-bit PNG with transparency, which is why the names confuse people.

Can a PNG-8 have a soft transparent edge?

Yes, if the tool writes it that way. The format lets each table entry carry its own alpha, so an entry can be a half-transparent brown. But each combination of colour and alpha uses up one of the 256 entries, so a long soft edge competes with the colours of the subject. Some tools write only on or off transparency, which makes the edge jagged.

Is PNG-8 lossy?

Making one from a full-colour picture is lossy, because the picture's colours are mapped on to at most 256. The PNG-8 file itself is a faithful record of that reduced picture. A picture that already has 256 colours or fewer, such as a flat logo, can be saved as PNG-8 with nothing lost.

Which is better for a website, PNG-8 or PNG-24?

For flat graphics and icons, PNG-8 is smaller and looks the same. For a photograph, PNG-24 or a JPG, because 256 colours show banding in a gradient. For a transparent cutout on a web page, WebP is usually smaller than either, and PNG-8 only works if the soft edge survives the table.

What does getPNG's compressor write?

An indexed PNG with a colour table of up to 256 entries, chosen per file, with alpha carried in the table so a cutout keeps a soft edge. It never returns a file larger than the one you gave it. Because it reduces colours, it changes pixels slightly, which is where the saving comes from.

PNG-8 vs PNG-24: what the numbers mean for a soft edge