by Diggle

Created on: May 13, 2009   Last Updated: May 19, 2009

The key picture file formats used for web graphics are GIF (Graphic Information Format), JPG (Joint Photographic Experts Group), and PNG (Portable Network Graphics). Other picture file formats are either unsuitable or like the proprietary format used by Photoshop are not generally understood by web browsers and cannot be used to make a webpage display pictures. Even if they could be, the size of such files would give even broadband users a slow experience. With the spread of broadband and the slow decline of Internet Explorer 6 and below, choosing the right format for web graphics is probably not as important as it once was. Nonetheless there are ways in which the graphics file format chosen may significantly improve (or hinder) a users experience on a site. Knowing the differences between the three main formats and choosing the best one for each image on a site (balancing image fidelity and file size) will help make web graphics as compact as they can be while maintaining acceptable quality.

The key features of each format

GIF images can have up to 256 colors. They can be animated (animated GIFs are often seen as forum avatars) and will still be a single file in this form. The compression used to make GIFs as small as possible is lossless, which means that image quality is not degraded by the compression. GIFs support transparency so that you can avoid having your picture appearing to be in a box by making the background of the file invisible.

JPG (aka JPEG) files can have up to 16 million colors. Unlike GIFs the compression process is lossy which means some quality is lost as the file is reduced in size. The more compression is applied the more quality is lost, but the smaller the file size. JPGs do not support transparency. JPG files with only a few colors, such as text conerted to a graphic or graphics with areas of flat colors will be larger than necessary, and look "mottled."

PNG images combine some of the features of GIF and JPG. They are lossless like GIFs but most images will compress to a smaller size in PNG format than they will in GIF. PNGs also support transparency but with a wider range of options than GIFs. Like JPGs, PNG files can display millions of colors. However PNG files do not officially support animation.

What tasks should each format be used for?

GIF files are best used for images with only a few colors. Charts, and simple graphics will work well as GIFs. Conversely GIFs should never be used for photos and other very colorful images. Not only will the reduction to 256 visible colors wreak havoc with the image, the file size will be huge in comparison to either of the other formats. JPGs should be used to display photographs and other images with many colors such as scanned images. Although some data is lost in the compression process this will probably not be noticeable at the picture size typically used for a web graphic. Traditionally the choice in graphic file formats for web use could be simplified to this choice about how many colors the picture had: many meant JPG, few meant GIF. So what about PNGs? PNGs were created as a replacement for GIFs and overcome their color limitations, whilst usually compressing a given file better. Influential Internet bodies such as the World Wide Web Consortium have called for web designers to use PNGs instead of GIFs. However Internet Explorer versions 4 to 6 do not display PNG files properly which has previously hampered the adoption of PNG as a file format for the web. Now though these older versions of Internet explorer represent a small and declining proportion of the browsers in use. The vast majority of users today are surfing with browsers which will handle PNG files perfectly well.

Learn more about this author, Diggle.
Click here to send this author comments or questions.