Optimizing images for the web
The human mind is better at extracting information from images than text. Images can be used effectively on the web to add interest to a site and to support the theme of textual information.
They say a picture is worth a thousand words. Unfortunately on the web an image can take just as long to download as those thousand words. This is why compression is important.
.jpg and .gif are common formats for compressed image files. Both formats are very effective on the web, and which one you choose really depends on the type of image you want to display.
Uncompressed formats
Before discussing the various compressed file formats we should study a format that is completely uncompressed. In a bitmap, the image will be divided up into individual pixels. Each pixel is treated separately, and the colour and position recorded.
Bitmaps use 16 million colors, so will make an exact reproduction of the image. The drawback of bitmap images is they are huge in size.
JPEG compression
All web images use some form of compression to minimize download time. JPEG is a popular form of compression that is ideally suited to photographs. A jpeg will not store all of the information on the page in the same way as a bitmap. It will only store a certain number of pixels. When it comes to rebuild the image it will make a guess at the missing pixel based on the color of the surrounding pixels.
This process works well where the is a gradual change from pixel to pixel as normally occurs in a photograph, however the approach does not work well for sudden changes in colors, resulting in jpeg artifacts.
jpegs are ideal for photographs as they use 16 million colors. The photograph below is a picture of the Falkirk Wheel (a boat lift in Scotland) enlarged by 4 times. The jpeg artifacts can be clearly seen at this magnification, however the image looks fine at it's normal size.
jpeg images can be saved at a number of different compression levels. 1% compression is the lowest level and results in a good quality image with a relatively large file size.
A compression between 20% and 30% is usually suitable for the web. The quality of the image remains acceptable when viewed on a computer monitor, but the file size will be a tenth of a high quality jpeg image.
GIF compression
gif format is very effective for images where much of the image is the same color, for example a screen shot of text where the background is white.
Where bitmap images record the position and color of every single pixel, the gif image will record the color of one pixel, then note that the next 20 pixels are the same color. This results in a much smaller file size.
The following text was taken as a screen shot from this page and then doubled in size. The gif image is clean, but artifacts are clearly visible in the compressed jpeg image
gif images only have 256 colors, and decide which colors to store based on the colors in the image. For example, the gif palate for a picture that is entirely made up of different shades of blue will not include any reds or other colors.
This is a problem for photographs which can contain millions of colors as can be seen in the example below:
The limited number of colors spoils the appearance of the gif, and the file size is actually much higher than a jpeg due to the complexity of the image.
In Summary
Your choice of format will depend on the image you want to save. Photographs generally work best in JPEG format. Text, screen shots, logos etc generally work best in gif format.
Back to guide to web design
