GIF, JPG, PNG, what's all about?

GIF, JPEG and PNG are the most common and widely-supported graphic formats used on the Internet and in multimedia design as well as print. It is important to understand which formats to use for creating clean, sharp images and how to optimize them to get the best quality from all your Web graphics.

All three formats utilize compression techniques for saving images in reduced file size.

GIF (Graphics Interchange Format), pronounced either “gif” or “jif”, is one of the most common Internet formats. It is supported by all Web browsers. GIF files handle a maximum of 256 colours (8-bit colours). It uses a lossless compression scheme called LZW. Image quality never degrades with resaves.

Gif features background transparency and animation (requires image editing /animation program). It also supports interlacing which means it creates the illusion of faster loading graphics. An image is presented in a browser in several steps. At first it will be fuzzy and blurry, but as more information is downloaded from the server, the image becomes more and more defined until the entire image has been downloaded.

Good for:
• GIF is significantly better on images with only a few distinct colours, like line drawings, clip art, icons and logos
• Images with transparent areas
• Simple animation (if you have to). For everything above basic Flash is doing much better job.

Not good for:
• Should not be used for photos or graphics with complex colours or gradients.

JPEG (Joint Photographic Experts Group), pronounced “jaypeg”, is also supported by all Web browsers. It supports 24-bit colours (16.7 million colours).
JPEG uses "lossy compression" which designed to reduce things that don't make a noticeable difference in the picture. It's based on studies of human perception, and it throws away data you won't notice.

Image quality degrades slightly when a JPEG is resaved. The information that is discarded in JPEG compression cannot usually be detected by the human eye at first. Howevever, over time and with subsequent resaves, image detail is lost.

JPEG doesn’t allow background transparency. Similar to the gif format it also supports progressive rendering.
JPEG compression usually makes photographic images smaller in size. Converting gif image to jpeg reduces it’s size almost in half.

Good for:
• Photographic images
• Graphics with complex colours and gradients

Not good for:
• Images with transparency
• Text, cartoons, black-and-white line drawings (files come out very large).
• Images with sharp edges (makes them blurry)


PNG (Portable Network Graphics format), pronounced “ping”, is the newest graphic format and is designed to be an improved, free successor to GIF format.
PNG supports a more efficient compression algorithm than GIF, is patent-free, is capable of storing more image formats and includes some nifty error-checking features. When saving identical GIF and PNG images, the resulting PNG file will be 5% to 20% smaller than the GIF file.

PNG supports 24-bit colours (16.7 million colours). It also uses lossless compression algorithm, so image quality never degrades with resaves.
It features background transparency and Variable transparency, but does not support animation.

Older printers and some versions of browsers may not support PNG transparencies.
PNG images are generally larger then JPEG, so whenever possible web designer should use the format that make an image smaller without compromising quality too much.

Good for:
• Whenever GIF would be used as PNG is an improved version of GIF. It is ideal for compressing graphics that contain flat areas of plain colour, as well as text.
• Whenever you need to add transparency to the photographic image. When PNGs are placed over other graphics or backgrounds, underlying images will be visible through the transparent PNG pixels.

Not so good for:
• For complex, colourful photographic images (they come out too large and not so sharp)

Why are GIF, JPEG, and PNG commonly used?

They're standardized. The file format is open and available for anyone to use. JPEG and PNG go a step farther: JPEG is an ISO standard, and PNG is an IETF RFC and a W3C recommendation.
They're compressed. GIF files are compressed around 5:1, JPEG files are compressed 10:1 or 20:1, and PNG files are compressed around 7:1. On the web, even with broadband, smaller is still better.
Web browsers support them. This is 100% true for GIF and JPEG and 99% true for PNG.


For an easy-to-understand explanation of 8-bit, 16-bit and 24-bit colors, see http://fox-gieg.com/tutorials/2005/24-bit-color/