Web Graphics: Which Format is Best?

Last updated: December 20, 2013

Drawings, diagrams, and photos can focus your students’ attention and explain complicated ideas. Putting those images up on your Web site can be a confusing process, however. Help is on the way!

Web graphics typically come in three varieties: .GIF, .JPG, and .PNG. Your choice of format should depend on the kind of image you’re using.

Here are the basic differences you’ll need to consider.

GIF

Catalyst Web Tools Logo Saved as GIF GIF stands for Graphics Interchange Format, and it is a patented compression format owned by CompuServe and Unisys. It uses a “lossless” form of compression, which means that when you save the image, you don’t lose any of the data. Line art, such as the Catalyst logo shown here, is ideal for .GIF files.

Photo saved as GIF looks patchy

 The GIF file uses special compact codes for large areas of a single color. Another important concept in GIFs is the color palette. A color palette is a list of all the colors in an image. A GIF is limited to 256 colors. If you save an image as a GIF but it calls for more than that number, some will be lost. The houseplant photo shown here was saved as a GIF, and as a result, appears patchy. Many image-editing programs allow you to “dither” the image, which is a way of determining which colors to keep for highest visual quality. Dithering works well for images that have gradual changes in colors. Unfortunately, dithering also makes the image file bigger, because blocks of colors must be saved in the palette. The fewer colors in your image, the smaller the palette can be, and the smaller the file size you’ll get.

JPEG

JPEG (or JPG) stands for Joint Photographic Experts Group, named after the standards committee that developed it. Unlike GIF, its compression scheme isn’t lossless, but lossy, so it does throw away some of the data. However, the same photograph
saved as a .JPG usually looks clear, as is evident in the example here.

Photo Saved as JPG

JPEG compression is based on the idea that certain minute differences in images cannot be perceived by the human eye. It takes advantage of our perceptive abilities by smoothing over areas of the image, creating larger blocks of solid color. This leads to more compact files. When you create a JPEG, you can usually select the level of quality you want. Higher quality will lead to a larger file size. A larger file size means longer download times for your audience.

PNG

PNG stands for Portable Network Graphics, and it’s an open lossless compression format, designed to replace the older GIF format. It’s promising; however, it is not the standard, and many Web browsers don’t know how to read these files. Keep an eye on this technology, but stick to JPGs and GIFs for now.

So which should I choose?

It all depends on the kind of image you have. GIFs work best for drawings and graphics that use just a handful of colors, such as “line art.” JPEGs are typically used for scanned or digital photographs that need a large number of colors. GIFs can also be used for animated and transparent images. PNG does have transparency, but GIF is the only format for animated images. It compresses simple graphics or hand-drawn images very well. PNG is very similar to GIF, but with improved compression. It doesn’t support animation, but it’s not limited to 256 colors. The biggest drawback is that almost no one uses it.