Optimising images

The page can be slow to download, the text can jump about while the page is loading, and the images when they do arrive can look very fuzzy or blocky.

The issues covered in this article are:

• Wrong dimension information.
• Inappropriate format.
• No dimension information.
• No ALT attribute.

Wrong dimensions

When an image is displayed in a page the size of the image is controlled by the height and width attributes given in the HTML. The display size is independent of the actual size of the image. So you could have a very large image, appearing as a small postage stamp sized picture on the page, or a very large picture on the page from a very small image, - and everything in between. The browser takes the image it has downloaded and can either stretch it to fill and larger space, squeeze it down into a smaller space, or display it at its true size. Either way the full size image has to be downloaded.

In the first scenario (where we display a large image in a small space) we waste bandwidth and slow the loading of the page as a whole. The complete (large) image has to be downloaded, regardless of the fact that it only appears as a tiny picture on the page. You might have to download a 100K image just to show something that is tiny on the page. It would be better to use your favourite paint package and resample the image to the size as it actually appears in the page.

In the second scenario (where we have a large picture in the web page from a small image), you may find yourself with a blocky image. Like the one below. This may or may not be a problem depending on the image and the effect you are hoping to achieve.

This process can have benefits. If you want to fill a large area with a single or simple image, then you could have a small image, and simple enlarge it using the dimension attributes in the HTML. An extreme version of this if you want to have an area 400x400 of blue. You can achieve this by having a 1x1 image but giving its height and width attributes of 400x400. In this way you can cover a large area with only a small download.

Inappropriate format

Why would this be a problem? Let us imagine you have a page that has 15 images, all saved has JPEGs. Each of 35K, that’s 525K of images, plus around 20K of HTML and other bits and bobs.

How is this possible? This is possible because different image formats (gifs, jpeg, pngs etc.) are more efficient depending on the type of image you want to save. Often you can find that saving the image in a different format can save significant amounts of bandwidth. It’s a very common mistake to make, and fortunately one that is very simple to fix.

For each image on your website you should consider saving it in two or three different formats and then go for the one that offers the smallest file size with the right image quality. Three reasonable formats to use might be GIFs, JPEGs, and PNGs. Generally GIFs are best for images with lots of sharp edges and fewer colours. So buttons with text, images of documents or diagrams work really well with GIFs. PNGs have similar strengths to GIFs and in addition do not degrade the quality oof the orginal image provided there are less than 256 colours. JPEGs are better for pictures of photographic images such as faces and landscapes, where there are fewer sharp edges.

After you’ve saved a number of different types of images in the different formats, then you’ll soon pick up a feel for which format is going to work best. For examples of different file sizes see below. Note: the idea here is that the images look exactly the same - it's just that they are saved in different file formats.

The image above is as saved as a jpg. Size 17K bytes

The same image saved as a gif. Size 2K

Same image now as a png, size 1.5K.

As you can see for "simple" images GIFs and PNGs are more compact than JPEGs. But this is not true for all types of images, some pictures are more efficiently saved as JPEGs. See the images below which again should look almost exactly the same.

The image above is a jpg size 18kbytes

Same image saved as a gif 46K bytes

Same image again, this time saved as a png, size 36K bytes.

So for these landscapes the JPEG is more efficient, but for the spreadsheets GIFS and PNG are better. Different formats are better suited to different types of image. Simply saving an image in a different format can save you bandwidth, and speed the download of the page; but there is no "best" format, different formats are more efficient for different types of image.

No dimension information

This is a more subtle issue than those above. If you don’t define the size of the image in the HTML, then the browser doesn’t know how big the image is until the image itself is downloaded, by which time the text has been rendered on the screen. When the browser finally downloads the image it might well have to move the text (and other images) to fit the new image in. This can cause the layout of the page to “jump” around. If this happens with multiple images then it can be very distracting for the user as the text moves around so many times during loading.

No ALT attribute

ALT attributes are brief descriptions of the purpose of the images in the web page. These are useful for a number of reasons.

• It will be displayed in the place of an image prior to the image being downloaded allowing visitors to have a reasonable idea of what to expect from the image.
• If the image is not found then people have a clue about what the image would have been.
• They enable visually impaired users to understand and navigate the site much more easily.

On the subject of accessibility it is worth noting that the laws in a number of countries insist that websites are accessible to people with a wide range of abilities.

How can you tell which images need attention?

With software tools you’ll be able to see which images have no ALT attributes, which have missing dimension information, and which images have mismatches between the display size and image size.

Summary

Choosing the correct size and format of an image, and correctly defining its attributes can greatly increase the performance of your website, and improve the visitor's experience. The changes required are often very simple, very quick, and very cheap!