Simple web design, web development, information technology, & technical communication

Articles and resources for web developers and the average person. Topics include web development, web design, technical writing and communication, and all aspects of information technology.

.GIFS vs. .JPEGS: Which image format should I use?

Originally published on Monday, September 5th, 2005

This question arises often for web designers and developers, but can also apply to anyone using a graphics program to produce compressed images.

What’s a .GIF?

GIF stands for Graphics Interchange Format. It is a highly compressed image format, meaning its file size is much smaller than an uncompressed image. Smaller file sizes mean faster download speeds for web pages, which generally means happier users. This is precisely why the GIF is one of the two preferred image types for the Web, along with JPEG.

GIF files have several unique attributes. For one, a file of this type is limited to 256 colors. In addition to standard images, GIFs can also be used for animations. This was especially common in the early days of the Web, though they are still used (Flash animation has largely replaced animated GIFs as the standard for motion on the Web). GIFs can be used to create images with transparent backgrounds, which can be useful in a variety of scenarios. For example, you could create a transparent GIF image of your company’s logo which would enable you to change the background color of the web page and not have to create a different logo for each page background.

What’s a .JPEG?

A .JPEG is an image file that uses the compression algorithm developed by the Joint Photographic Experts Group. Like GIFs, JPEGs enable high compression of image files and are the de facto standard for images on the Web.

What’s the difference between a .GIF and .JPEG?

There are a several key differences that are worth memorizing if you’re a web designer or developer. GIFs are limited to 256 colors, they can be used for transparent images, and they can be used for basic animations. JPEGs support millions of colors (16.7 million to be exact!), but they cannot be used for transparent images (images that neatly float over a background of any color) and the .JPEG format does not support animation.

When should I use a .GIF?

GIFS should be used when creating images with solid blocks of color, such as simple page backgrounds (grids, plaid, solid tones, etc.), image lines, bullets, horizontal rules, navigation buttons, etc. When text on a web page is created as an image, i.e. for styled font headings that cannot be replicated in HTML, a GIF is also the way to go. If you need to create an image with a transparent background or an animated image, GIF is the only option.

When should I use a .JPEG?

JPEGS should be used for photos. Always, without exception. If the image in question is a photograph of some type, a .JPEG will produce the best compression of the image (lowest file size/best image quality). This applies to both color and black and white images.

Any image that contains a gradient effect or any other advanced fading effect that requires a smooth transition from one color to another should also be saved in JPEG format.

What’s all this babbling about .PNGs?

PNG stands for Portable Network Graphics, and images of this type have recently popped up on the Web. Many web developers recognize this file type as the standard for files created by Macromedia Fireworks, a professional Web graphics program.

PNGs are actually more than just files created in Fireworks. They stand to potentially replace the use of GIFS on the Web, as they offer better compression rates, more advanced transparency capabilities, and other features. Currently, standards-based web browsers like Firefox and Safari (Mac based) offer support for the use of PNGs. Microsoft Internet Explorer on PC, however, is still extremely buggy and unreliable. For the time being, it is best to avoid the use of PNGs until it is confirmed that IE offers full support for their use in web pages.

One Response to “.GIFS vs. .JPEGS: Which image format should I use?”

varun krishnan Says:
February 13th, 2006 at 2:16 pm
thanks a lot for this wonderfull article

Add a Comment

You must be logged in to post a comment.