Image File Format Breakdown

When creating graphics for the web, you have a three primary file formats from which to choose: GIF, JPEG, and PNG. There are some other available formats, like SVG (Scalable Vector Graphic), but they aren’t as common.  Choosing the right format for the image depends on a number of factors, including what the image is (e.g. line art versus photo), quality, size, and whether it needs to support things such as transparency and animation. Your choices might seem a bit daunting at first, but after reading through this quick guide you’ll have a solid grasp of which format works best for a given image.

GIF – Graphics Interchange Format

GIFs (pronounced either “giff” or “jiff”) are a popular choice for logos, icons, and simple line art. Because they are limited to 256 colors or fewer, GIFs tend to have smaller file sizes. This limitation also makes them a very poor choice for photographic images, or complex images with gradients or a higher number of colors.

GIFs can only handle 256 colors.

GIFs are the only format that enjoys full support for animation, although animated GIFs are still limited to 256 colors.

Like the PNG, GIFs support transparency. However, GIFs do not support alpha transparency, which allows for different levels of opacity. This means that, with a GIF, a color is either complete transparent or completely opaque.

Best Used For:

  • Logos
  • Line art
  • Simple animation

Pros:

  • Basic transparency (on/off only)
  • Supports animation
  • Small file size

Cons:

  • Does not support alpha transparency (levels of opacity)
  • Only supports 256 colors

JPEG – Joint Photographic Experts Group

JPEGs (pronounced “jay-peg”) were created for photographic images, and are still the idea choice for photos on the web.

An important fact aboutJPEGs is that they use a “lossy” method of compression. This means that, in order to reduce the file size, the JPEG discards a certain amount of information on the image. The higher the compression, the more of the image is lost. Images that are re-saved multiple times will degrade in quality with each successive save. However, the user has a great deal of control over how much compression takes place, and can even choose to save the image at 100% quality.

JPEG Compression Comparison

Saving and compressing JPEGs can cause two other issues: blurry text and “artifact”, which are noticeable distortions to the image. Because of these issues, it’s always a good idea to preview your image at different compression rates to find an acceptable balance between image quality and file size.

Best Used For:

  • Photography
  • Complex images

Pros:

  • Good compression
  • Smaller file size
  • Supports millions of colors

Cons:

  • Lossy compression
  • Artifacts
  • Blurry text
  • No transparency
  • No animation

PNG – Portable Network Graphic

PNGs (pronounced “ping”) are relative new compared to GIFs and JPEGs. The PNG was designed as an updated version of the GIF, and excels at logos, line art, and uncomplicated images. PNGs also work fine for photographic imagery, but since they use a “lossless” compression method (no data is discarded), the file sizes are often noticeably larger than a comparable JPEG file.

The biggest feature of the PNG is that it supports alpha transparency. That means that any pixel can be completely invisible, completely opaque, or anywhere in between.

PNGs can be saved at 8, 24, or 32 bit, although most image editing tools combine PNG-24 and PNG-32 for the sake of simplicity. PNG-8 files work much like a GIF in that they can contain up to 256 colors and don’t offer alpha transparency; unlike a GIF, PNG-8 files cannot be animated. Because PNG uses a more advanced compression technique, PNG-8 files tend to be smaller than comparable GIF files.

PNG-24 files can display millions of colors, and PNG-32 supports millions of colors as well as 255 levels of opacity. PNG-32 files are good for complex imagery that require transparency. If images for the web do not require transparency, you’re generally better off using JPEG as the file size would be noticeably smaller. While the PNG would be a higher quality image, the quality difference would not be noticeable enough to justify the difference in file size.

Best Used For:

  • Logos
  • Line art
  • Complex imagery

Pros:

  • Support alpha transparency (levels of opacity)
  • Smaller file sizes for simple images
  • “Lossless” compression

Cons:

  • Large file sizes when used for photos
  • No animation
  • Alpha transparency is not supported in Internet Explorer 6 or earlier

2 Responses to “Image File Format Breakdown”

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>