GIF, JPEG or PNG? Using Images on the Web

This article aims to describe the difference between the three most popular types of images used on the Web, and how to use them effectively in your websites.

JPEG

JPEG files are compressed images that maintain a balance of size versus quality. For example: More compression = less image quality = smaller file size. In contrast, less compression = more image quality = larger file size. Since JPEG files do not maintain 100% of the original image's pixel data, it is not considered a lossless image format.

Usage

Due to this sensitive balance, JPEGs are best suited for photographs where slightly depreciated quality is not very noticeable. JPEG is not typically a good format for logos, icons, and other simple images.

GIF

The GIF format was developed by CompuServe specifically for use online. GIF, sometimes pronounced "GIFF", is a lossless, 8-bit image format. Lossless means that 100% of the original pixel data is maintained. The term 8-bit refers to color depth — an 8-bit image can only have up to 256 colors.

Usage

Because of these limitations, GIFs should not be used for photographic images. Instead, use them for things like:

  • Logos
  • Icons
  • Layout images (such as corners, borders, etc.)
  • Any other small, simple image with only a few colors

Transparency

GIF supports basic transparency, which means that certain pixels in the image can be "invisible", so you can see whatever lies behind them. This is especially useful for making icons that are intended to sit on top of a varying background.

Compression

The GIF format uses the LZW compression algorithm, which is patented by Unisys. For a time, this meant that the authors of image-editing programs were forced to pay Unisys for the rights to include GIF support in their programs. The patent, however, expired on June 20, 2003 in the United States.

Interlacing

GIF also supports interlacing, which makes the image appear to load faster in web browsers. This could be helpful for people browsing your site on a slow dial-up connection.

Animated GIFs

An animated GIF is a single file that contains multiple variations (frames) of an image. These frames are drawn over and over again to create the illusion of animation. When used appropriately, animated GIFs can be catchy and impressive. Unfortunately, many people tend to overuse them on the web, creating a very annoying experience for their users.

PNG

PNG files, pronounced "PING", were developed as a freeware alternative to GIF files which, at the time, used a patented compression algorithm. The PNG format is also lossless but, unlike GIF, PNG can support 8-bit and 24-bit images.

8-bit PNGs

An 8-bit PNG can have up to 256-colors with basic transparency. This format is very similar to that of GIFs, except for the compression method.

Usage

8-bit PNGs should be used the same way as GIFs:

  • Logos
  • Icons
  • Layout images (such as corners, borders, etc.)
  • Any other small, simple image with only a few colors

24-bit PNGs

24-bit PNGs can have up to 16 million colors and can support alpha-transparency. This means that a partially transparent image with anti-aliasing can blend smoothly into the background.

PNG Support

PNG support is becoming more widespread as browser developers become more conscious of Web Standards. Fortunately, PNGs are currently supported by all popular web browsers including, IE*, Firefox, Safari, Opera, and Konqueror.

*Unfortunately, IE6 messes up alpha-transparency in 24-bit PNGs and displays a grayish-blue background color instead. IE6 has also been known to render some 8-bit PNG colors slightly off-hue (a gamma correction error). Although the alpha-transparency issue has been resolved in IE7 beta 2, Microsoft hasn't addressed gamma correction yet.

Photo courtesy of Fernando de Sousa.

Author avatar

About the author

New Hampshirite building web apps in Florida. Creator of Surreal CMS, Postleaf, and DirtyMarkup.

Need to get in touch? Catch me on Twitter.