Web Image Format: GIF

The GIF Format

The Graphics Interchange Format (“gif”) was originally developed by CompuServe in 1987 . The GIF format is one of the most popular formats on the Internet and it supports 256 colors (8-bit color). Unlike the JPEG, the GIF is loss-less, meaning it does not get blurry or messy when saving. This format is excellent at compressing areas of images with large areas of the same color.

The most common method of reducing the size of GIF files is to reduce the number of colors on the palette so while this helps preserve accuracy, it also is limited to only simple shapes and text. Because of this format’s limited color palette, GIF images are generally not suitable for photographs all, which typically require high amount of hues, shading, and color gradients.

Transparency & Animation

The GIF format supports transparency. This allows a graphic designer to designate a single background color of the image to be transparent. This means that if you place a transparent GIF in a yellow table cell, the background color of that image will turn yellow. Although, you must design your GIF beforehand with the background color in mind, the same GIF file will not work for all background colors. If your GIF file contains any shading on the outer edges, you will notice that the transparency looks very poor when you put your image on a different color background.

The GIF is currently the only option for putting animation online (unless you want to use Flash or other vector-based animation formats, which typically cost more). Due to GIF’s color limitation of 256 colors, this leaves you with only a few options when it comes to what type of animation you are going to include.


The interlacing feature in a GIF file is very similar to the “Progressive JPEG” feature discussed in my previous Web Image article. GIF interlacing creates the illusion of faster loading graphics. What happens is that 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. It’s important to note that interlaced GIF files will usually be a bit larger than non-interlaced ones, so use interlacing only when it makes sense.

When to use them

Generally, GIF files should be used for logos, line drawings, icons, and anything involving a lot of text. Avoid using it for pretty much any photographic work. When you’re designing GIF files, avoid using gradients, shading, and turn off anti-aliasing where possible to minimize the file size.

The GIF format will be a very good format for most of the graphics you’ll be using on your site, though PNGs are better in many regards. I will discuss more on the PNG format in my next article. Always remember, experimentation is the key to success.

To view my previous article on Web Image Formats, click HERE.

About the author

RJ Ponzio

RJ founded Shore Web Tech LLC in 2011. The mission of Shore Web Tech (SWT) is to help small and medium local businesses take advantage of today's affordable technology solutions. RJ currently holds Google's "AdWords Qualified Individual" certification.

Leave a Reply

Your email address will not be published.