Image File Types

Choosing the right file type, and optimising your images for the web, is important for good web design. Far too many websites have huge images that take so long to download that any users without high-speed broadband will soon run elsewhere. It is not just a simple trade-off between image quality and file size.  If you make you right choices, you can have both. For a more thorough explanation take a look at Digital Image File Types.

PNG, JPG, or GIF?

If you need a transparent background it has to be PNG or GIF. If you also need photographic quality 24-bit colour then PNG is the only option. Portable Networks Graphic format (PNG) was specifically designed with the needs of the web in mind, so it is the obvious choice. However, older versions of Internet Explorer, still used by some users, do not fully support PNG graphics. Check your pages in Internet Explorer before deciding on which format to use.

You should have no problem with using PNG format for screenshots of dialogue boxes, but images with transparent backgrounds like that on the right will be rendered with a grey background in version 6 of Internet Explorer or earlier.

This PNG image is 416 x 369 pixels. The file size is (163 K). It contains 41,744 unique colours. The white background has been made transparent.

Where PNG is best is with images containing large areas of uniform colour. Dialogue boxes and screenshots of software programs are ideally suited to saving in PNG format.

Another reason for not using JPG compression is for pictures having sharp contrast, which includes nearly all pictures containing text. The way that JPG compression works means that sharp edges become blurred with artifacts introduced in the compression process. Repeated compression of the JPG image, opening and saving it several times, magnifies this effect. Compare the PNG image on the right (9 K) with the JPG image below (22K) saved only once at a high quality setting of 75.

The PNG image has to be saved directly from the screenshot. If you open a JPG image and save it as PNG, it will get bigger as JPG compression modifies pixels in the original image, adding grey pixels on the borders of black and white, for example..

As a rule, screen shots of dialogue boxes will be smaller and sharper if saved as PNG images or GIF images than if saved as JPG, whether the JPG image is saved at high, medium, or low quality settings.

The same dialogue box saved as GIF is 14 K. Because the file contains only 137 unique colours, the GIF image contains just as much colour information as the PNG image. There is no loss of quality at all by using GIF format for such images, but the PNG image is smaller. You might just notice a loss of colour quality on some screenshots.

Benefits of JPG

The same image saved as a high quality JPG image is just 25 K, less than 1/6th the size of the PNG image. Irfan View has a range of settings for saving JPG images from 100 (best) to 1 (lowest). For thumbnails or other small images where quality is not paramount, one can safely use a setting as low as 25 for most images. Using this low setting, the above image is reduced to 11 K, but still looks OK. Using a moderately high setting of 75 it looks almost as good as the original PNG image as you can judge for yourself from the image to the right.

I find that for general use a setting of 50 provides adequate compression while not compromising the quality too much.

Using higher settings than 75 gives ever diminishing improvements in quality for rapid increases in file size. It is debatable whether one should ever use a higher quality than this on the web.

JPG images can also be saved as "progressive" so that the image loads quickly with less detail, and then detail is filled in later. This is useful with larger images and slower internet-connections. With images less than 100 K and broadband connections, one will hardly be able to notice whether the images are "progressive" or not.

Work-around for Old Versions of Internet Explorer

What we can do is first use the highest quality PNG image on our chosen background and display it in a modern browser. Then grab the image including the background, crop it to exactly the same size as the original, then save it as a high quality JPG image, which has the right background to blend into the web page.

This image is now 32 K, but is still much smaller than the PNG image, only slightly less sharp, and retains the full colour information, which is lacking from the GIF image. One downside of this technique is that if you don't get the crop precisely right, there is a discrenible shadow where the JPG meets the background one or two pixels out of alignment with the pattern.

For the majority of photographic images, JPG is best due to its efficient compression. Just be aware that for some images with large areas of the same colour, or with text or sharp lines, either PNG or GIF will prove much better.

Benefits of GIF

Graphic Interchange Format (GIF) images have the advantage of using lossless compression, but still supporting transparent backgrounds. Compression is good, but not nearly as efficient as lossy JPG compression. The downside is that it only supports 256 colours. This GIF image is 60 K, and the transparency displays correctly in old versions of Internet Explorer. GIF doesn't support variable transparency however, as PNG does. The background is either 100% transparent or 100% opaque. The limited number of colours also means a greater likelihood that some areas of the image will be transparent, which are not part of the background, as you see from the blotches on the shoulder and hind quarters of the Chindit. This effect can be avoided by choosing a transparent colour not used in the cutout image.

GIF images also support interlacing, but the interlacing is less sophisticated than that used by PNG.

The Bottom Line

Use PNG for dialogue boxes, JPG for photographs, and GIF for clipart images with transparent backgrounds. For photographs with transparent backgrounds use PNG, or composed JPG images, laying the cutout on the intended background.

Footnote

Other formats such as BMP and TIFF hardly deserve a mention, except as something to be avoided on websites. If the above JPG image with textured background is reduced by ¼ in each direction (1/16th the number of pixels) and saved as BMP and TIFF images, they are each 29 K — almost as big as the full size JPG image (32 K)