Images for the Web: File Formats

There are three main formats of images that are used on the web, GIF, JPG and PNG. It is difficult for beginning developers to know which format should be used. By following the basic truth of smaller is better when it comes to file size and download times, you will always be safe. The key is to use a format that will give you the quality you desire at the size you require.

GIF - Graphics Interchange Format
GIF is a popular web graphic format. GIFs contain a maximum of 256 colors. GIFs can also contain a transparent area and multiple frames for animation. Images with areas of solid color compress best when exported as GIFs. A GIF is usually ideal for cartoons, logos, graphics with transparent areas, and animations.

Understanding GIF:

If you look at the image of the radio, you can see that it contains many colors. There is the color spectrum at the top and a black to white gradient at the bottom, as well as the picture of the radio itself. To accurately produce this image on your computer screen, we'll need far more than 256 colors. GIF compression works by reducing the number of colors required to create an image. Simply, think about what takes up more space - 2 crayons or 256 crayons. An image which uses the GIF format, takes alone the color information with it, the less it has to take, the smaller it will be. The GIF format examines each pixel of color in an image and makes a note (index) of it. Once each pixel has been indexed, it then selects and packs the 256 most common colors used. Any excess colors are then set to whatever is closest in the 256 available. In this way, each pixel retains its own color information and nothing is lost. The GIF format is referred to as a lossless form of compression because of this. This is because it does not lose any information (data). The following show the radio set at varying amounts of compression using GIF.

original image 271k	2 color GIF 2k

4 color GIF 4k	8 color GIF 5k

16 color GIF 7k	32 color GIF 10k

128 color GIF17k	256 color GIF 22k

web safe colors 216 9k	original image 271k

JPEG
JPEG was developed by the Joint Photographic Experts Group specifically for photographic or high-color images. JPEG supports millions of colors (24-bit). The JPEG format is best for scanned photographs, images using textures, images with gradient color transitions, and any images that require more than 256 colors.

Understanding JPEG:
Here is another image to which I've added a greyscale bar and a color gradient. This image is more of what we would need to apply JPEG compression to. JPEG works quite differently than GIF in its approach to compress an image. Instead of looking at the color of individual pixels, it looks at the colors used within a region of the image and then colors the entire region with whatever color is most prominent. The bigger the regions are the greater the compression will be but image quality will be worse. Let's take a more detailed view of how this works.

	Here is a close-up of the painted sign from the image above. We'll use this as a starting point for the expalnation into how JPEG compression works.
	The JPEG compression algorithm (a mathemetical formula for computing values) breaks the image into regions. The size of the region depends upon the user compressing the image. The smaller the regions, the better the image will look once compressed, but the file will be larger. The greater the regions means better compression, therefore smaller file size, but the image will not look as good.
	Here is an even greater close-up of the regions between the upper area between the O and C f the painted sign with our regions showing.
	The JPEG compression has been applied to the image, and the result within the area from the above photo is illustrated here. Notice that each of the regions is now solidly colored the color that was must prominent. Because color information for each pixel is no longer required, the JPEG compression simply keeps track of the colors used within each region. This discarding of data is what creates a smaller file - and is also why JPEG compression is referred to as lossy compression (sometimes called lousy compression - although it really isn't lousy).
	Finally, here is a portion of the image around the O and C where I have imitated the JPG compression for you as an example.

The following shows the various qualities of compression given top JPEG.

original Photoshop file was 792k

low quality JPG 9k - Notice the distortion between the rooftops and sky. This is commonly referred to as artifacting. Also notice that you can quite clearly see the regions as well.

medium quality JPG 15k - The artifacting is reduced, but the file size is larger.

high quality JPG 28k

maximum quality JPG 97k - Artifacting is all but gone. Our file size is approximately 1/8^ththe size of our original. So it really is not lousy at all.

zoom in detail of low quality JPG - You can clearly see the the blocks of the regions in the area between the windshield of the black car and the dark area (sign?) on the wall.

zoom in detail of medium quality JPG

zoom in detail of high quality JPG

zoom in detail of maximum quality JPG

PNG - Portable Network Graphic
PNG was developed as a patent-free alternative to GIF. PNG is used for lossless compression and for display of images on the World Wide Web. It is a versatile web graphic format. However, not all web browsers can view PNG graphics. A PNG can support up to 32-bit color, can contain transparency or an alpha channel, and can be progressive. PNG is the native file format for Fireworks. However, Fireworks PNG files contain additional application-specific information that is not stored in an exported PNG file or in files created in other applications.

What Format to Use?
The rule is to use whatever format will give you the smallest file size while maintaining the quality that you need. Although JPEG is usually best for full colour photographs, if the image does not have too many colurs and no subtle changes from dark to light areas, GIF may be your best choice.

How Do I Compress an Image?
Most common image editing tools (see lesson 5) will allow you to save in one of these formats. The better ones will allow yu to set some options to control the amount of compression. For example, Photoshop will allow you to set the total number of colours used for the GIF format (just because you have 256 to use does not mean you can't get away with less - whcih will result in a smaller file size). As well Photoshop will allow you to adjust the quality for JPEG compression, effectively controlling the size of the regions.

modifed: 2007-05-02