Web Colors.
PNG overview

Edit PNG files

PNG image file structure

The building blocks within a PNG file are referred to as "chunks". Basic palette images have 4 chunks and basic RGB/grayscale images have 3 chunks.

Many image editing tools add extra chunks which can adjust the way colors are displayed if a browser implements the full PNG specification, but not all browsers use the information. These extra chunks add to the file size and can be eliminated, but there are two additional chunks which are widely supported:

  • Palette images use an extra chunk, tRNS, to provide indexed transparency -- equivalent to GIF transparency.

  • Images with alpha transparency can have a default background color added with the bKGD chunk.

Of the PNG image tools reviewed on this site, Web Image Guru and TweakPNG are able to modify the internal structure of PNG files.

  • Web Image Guru is an image converter which can run as a standalone application, an Adobe Photoshop plug-in, or as an export module for other well known image editors.

  • TweakPNG can add, modify or delete chunks within a file after an image has been created ( screenshots below ). Download TweakPNG.

Gamma correction - gAMA chunk

Gamma correction is the ability to correct for differences in how computer systems interpret color values. Macintosh-generated images tend to look too dark on PCs, and PC-generated images tend to look too light on Macs.

PNG format allows the gamma value of the computer which created an image to be embedded into the image file. Browsers and image software which support the feature can extract the gamma value and make a correction if the host computer uses a different gamma setting.

Many image editing tools for Windows systems assume a gamma value in the region of 0.45455, which may not be completely accurate. Gamma correction is a good idea, but it is not wise to rely on it to match image colors to HTML/CSS background colors.

  • Web Image Guru automatically removes unnecessary chunks, including gAMA, and adds a white background to images with transparency -- a reasonable policy for producing compact files which will look okay in browsers which don't support transparency. You can choose a different background color if you need to.

  • TweakPNG lets you choose pre-selected gAMA values, or you can enter a specific value of your own choice.

Background color - bKGD chunk

If a PNG alpha image is saved with a background color, Internet Explorer for Windows versions earlier than IE7 render the alpha channel against that background. In all other modern browsers the background will be transparent. By default, Internet Explorer versions earlier than IE7 set a gray background.

Text annotations - tEXt chunk

With TweakPNG you can add any text annotations you want -- a description of the image, the date of creation, copyright information, etc. The available options are shown in the screenshot below. There's also a built-in image viewer.

Screenshots of TweakPNG.