1. Login

The Difference Between PNG8, PNG24, and PNG32

How to choose the right PNG format when saving your images.

11251 views

Edited: 2017-03-19 12:48

Beamtic article image

The difference between PNG8 and the PNG24 is, as the name of the formats suggests, that PNG8 only supports 8 bit colors, while PNG24 supports 24 bit colors.

PNG32 does not actually have 32 bit colors, but rather it is just 24 bit colors, with an extra 8 bit alpha channel. We use this when we need transparency in our images.

PNG8 often is often the first choice for web use. This is both because it often achieve the smallest file-sizes, and because, quite often, no more than a few colors are needed for web graphics.

PNG optimization tools can be used to minimize the size of images by adjusting the color palette of the PNGs, often with little or no noticeable difference in quality.

Choosing between PNG8, PNG24 and PNG32

If you only need index transparency, either saving your file as PNG8 our PNG24 will be enough. Using a color debt as low as possible, allows you to lower file sizes very effectively, which is important when saving files for web use, since minimizing file sizes will be one of the first steps in optimizing the loading speed of your website.

PNG32 includes alpha transparency, and as such, is best for advanced stuff, like creating a transparent gradient or shadow, which allows really cool stuff, like casting shadows on other elements on a page. Be careful though, because files can quickly get quite big.

Saving and optimization

Generally, the software you use to make your graphics in should be able to save – and optimize – your images for web use, but further optimization can often be achieved with free open source PNG compression tools, such as PNGOUT and OptiPNG. Some users might find that these tools are complicated to use, so you may want to look for a GUI, to make them easier to use.

Never pay money for conversion software though, as there are many free open source alternatives, which are often better than software you can buy!

As for editing, Paint.net and Gimp do quite well, even when it comes to minimizing the files for web use.

Share with your friends:

Tell us what you think:

  1. How You Should Use Multiple H1s in HTML
    An in-dept look at the use of headings (h1-h6) and sections in HTML pages.
  2. How to improve your website's pagination
    Pagination can be a confusing thing to get right both practically and programmatically. I have put a lot of thought into this subject, and here I am giving you a few of the ideas I have been working with.
  3. Trailing Question Mark in URLs
    The best way to deal with a trailing question mark is probably just to make it a bad request, because it is a very odd thing to find in a request URL.
  4. Auto-Include Width and Height on Img Elements With PHP
    How to optimize image-loading and automatically include width and height attributes on img elements with PHP.
  5. HTTP Headers are Case-Insensitive
    HTTP headers are not case-sensitive, so we are free to convert them to all-lowercase in our applications.

More in: Web development