Tags: Compression | GIF | JPEG | PNG | Quality

What format should I use GIF, JPEG or PNG?

I’m often asked which graphic format to use when putting together web content.  My response has always been, “It depends what you’re using the image for.”  Without going into detail about human visual perception and all the types of compression formats, I put together a summary to help demystify which graphic images you would use on the web.

The three main formats are GIF, JPEG and PNG.  These formats provide alternative approaches to delivering graphics or images over the web as quickly as possible even with the smallest of file sizes.   To understand these formats and how to use them, we need a little more information.

Compression vs Quality

Before defining the type of graphics, it’s important to understand about compression and how it affects images.  Compression basically refers to the size of the file.  There is a trade-off between the size of the image file and the quality or level of detail the image will have. There are two types of compression methods that the following formats fall into: Lossy and Lossless.

Lossy compression method uses an algorithm to compress the file size which reduces image quality.  It does this by discarding or losing some of the information about the image.  It removes color and details it deems too insignificant for the human eye to pick up which provides for an approximation of the original image.  In other words, Lossy compression attempts to match the quality of the original image with as much information removed as possible.

On the other hand, Lossless compression doesn’t throw out any information.  It uses a compression technique that minimizes the loss of image quality while reducing the file size.  Think of a ZIP file in relation to the original file.  The ZIP fill is the same as the original only a little smaller in size.

GIF (Graphic Interchange Format)

This is one of the two most popular graphic formats on the internet.  It was created in 1987 by CompuServe for use over slow internet connections.  In a world before high speed internet, you could wait a long time to load a webpage.  So speed was crucial.

Without getting into a lot of detail about the different versions, GIF basically uses a lossless compression which supports transparencies, interlacing, and animations.  It’s an 8-bit format which means that it is limited to a maximum of only 256 colors which helps keep files small.  This is practical for a web application. Not for photographs or complex graphic design work. It also doesn’t work well with gradients.  You should use GIF images for logos and line art.

JPEG (Joint Photographic Format)

Introduced in 1992, JPEG is the other of the two most popular formats.  This file format supports 16.7 million colors and is ideal for photography and complex graphics.  JPEG uses a lossy compression method which means that the image will lose some quality when the image is compressed.

Manual adjustments can be made to adjust the compression settings. This means is that you have more control between image size and/or image quality.  The lower the setting the smaller the file will be, but the image quality will degrade.  The higher the settings the better the image will look, but the file size can be large and that could slow down the webpage’s load times.

PNG (Portable Network Graphics)

Since the creation of the GIF format, by 1995 it was showing its age.  This format was created in 1995 in part against Unisys, who owned the patent for the GIF compression method.  Unisys and CompuServe made an announcement that it would start collecting royalties from any program using GIF.  This was the catalyst to creating the patent-free PNG format.

While GIF images can only be saved as an 8-bit image with a maximum of 256 colors, PNG images have a lot more alternatives.  You can save an image in 8-bit, 24-bit or even 64-bit images and have the ability to use 16.7 million colors.    GIF offers one out of 256 colors to be fully transparent while PNG has a much higher level of transparency support.  Another benefit PNG has is it only uses lossless compression, which means there is no data lost when saving or viewing the image.  Images saved with this format can tend to be a little larger than the other formats.

Browser support is another issue.  While newer browsers have no problem handling PNG images older browsers are a little sketchy.  Browsers like Microsoft Internet Explorer 6 have issues displaying PNG images.  Through the attrition of older browsers and computers this is becoming less of an issue as technology is always improving.

The one advantage GIF has over the PNG format is animation.  PNG doesn’t offer it, but uses a separate file format called MNG.

So when to use them…

As a rule of thumb, GIF images are good for logos, line drawings or simple animation.  JPG is better used for photographic images and art with continuously varying color gradients.  PNG can be used for everything a GIF can be used for including text, screen shots, as well as most anything computer related. For example, if you need to use an image in a excel chart, PNG works better than GIF and JPG.

It doesn’t seem like any one format is going to displace the others.  So what format should you use?  That’s up to you.  It really comes down to what type of image you are using and how you plan to use it.