1. Technology

When to Use the JPG, GIF, or PNG Formats for Your Web Images

Understanding the Different Types of Web Images

By

Social Media Life
Susanty Bong / Contributor/Moment Mobile/flickr Editorial/Getty Images

There are three types of images that can be used on web pages: GIF, JPG, and PNG.

GIF Images

Use GIF files for images that have a small, fixed number of colors. GIF files are always reduced to no more than 256 unique colors. The compression algorithm for GIF files is less complex than for JPG files, but when used on flat color images and text it produces very small file sizes.

The GIF format is not suitable for photographic images or images with gradient colors. Because the GIF format has a limited number of colors, gradients and photographs will end up with banding and pixelation when saved as a GIF file.

JPG Images

Use JPG images for photographs and other images that have millions of colors. It uses a complex compression algorithm that allows you to create smaller graphics by losing some of the quality of the image. This is called a "lossy" compression because some of the image information is lost when the image is compressed.

The JPG format is not suited to images with text, large blocks of solid color, and simple shapes with crisp edges. This is because when the image is compressed the text, color, or lines may blur resulting in an image that is not as sharp as it would be saved in another format.

PNG Images

The PNG format was developed as a replacement for the GIF format when it appeared that GIF images would be subject to a royalty fee. PNG graphics have a better compression rate than GIF images which result in smaller images than the same file saved as a GIF. PNG files offer alpha transparency as well as animation.

PNG images, like GIFs, are not well suited to photographs. It is possible to get around the banding issue that affects photographs saved as GIF files using true colors, but this can result in very large images. PNG images are also not well supported on older cell phones and feature phones.

  1. About.com
  2. Technology
  3. Web Design / HTML
  4. Web Design
  5. Graphics
  6. When to Use the JPG, GIF, or PNG Formats for Web Images

©2014 About.com. All rights reserved.