New Webmasters > Optimise Your Images for Faster Load Time

Optimise Your Images for Faster Load Time

By corbyboy ⋅ July 22, 2008 ⋅ Post a comment

On a website, speed is good.

As a competent webmaster, you know that fast loading times are important. Your visitors won’t stick around to read your blog or buy your products if they have to wait too long.

One of the biggest, if not the biggest, bottlenecks in page loading time is waiting for images to load. This guide will show you how to optimise your images for best performance on the web.

Google: A classic example of good minimalist design

A minimalist design can be very effective. Take a look at the image on the left. Google is one of the most popular pages on the Internet and it is also one of the smallest. Remember that the most effective way to optimise an image is to not use it.

Images should only be used when they are necessary. If an image doesn’t add anything to the page then should you really be using it? Remember that not everybody has superfast broadband yet and you need to make your website accessible to everybody.

Use Thumbnails If Possible

Two choices of thumbnails

If you have a page that consists of a large number of images such as a product catalogue or a photo gallery, putting tha full size of each image on the page is not a very sensible solution. Not only will it take an age to load, but the page will look messy and cluttered. Instead, show thumbnail versions of each image and link them to the large version of each picture.

There are two main ways of creating thumbnails: cropping the image or shrinking the image. The following images show the two types of 150×150 pixel thumbnail of a snowboarder.

Crop Out Anything Unneccssary

Taking the example of the snowboarder above, how much of the sky around the snowboarder is necessary? It really depends on what you are trying to show with the image. If you are showing how high the snowboarder is in the air then the sky would be necessary, otherwise cropping as much sky as you can may be the better option.

Use All The Necessary HTML Tags

When including images on a page you should always include the alt, width and height tags. The alt tag is essential as it gives a description of the image for people with images disbaled. The width and height tags are necessary so the browser knows how to place the image in the page while it is downloading.

Compress To The Max

A jpeg image saved with three different compression levels.

Uncompressed files will have a huge filesize and users will be left waiting for images to appear. Many image editors will allow you to change the level of compression when saving your image. It is simply a case of getting the balance between filesize and image quality correct. A more clear image will have a larger filesize.

Try experimenting with different file formats as they each use different compression methods. Jpeg is usually the most suitable format for photographs, whereas you will need to use gif or png if you need transparency.

After cropping the image of the snowboarder, it has been saved in jpeg format with three different levels of compression.

Share this page with others