Images and Loading Time

Images are probably the biggest single issue when it comes to load time. Broadly images fall into two categories - those used in creating the structure and appearance of the site, such as navigation buttons, logos, page banners and so on, and those that are added to illustrate content.

Page Structure Images

It is tempting to create very complex page designs that use a lot of images to create the desired appearance. And it can look great but watching a page where little bits of sliced images load very slowly before eventually coming together to look like something is not much fun for the user. It is very important to be aware of the potential users of a site before going this route. If your users are highly likely to have fast access and you are not concerned about those who don't, then go for it. However for most sites keeping structural graphics to a minimum and ensuring that they are optimized is the way to go. 

You also need to consider balancing the load. For example if you are creating a site which, of its nature, will include a lot of images to illustrate content then the structural stuff needs to be really pared back. In these cases consider using text navigation rather than graphics and make a real effort to minimize the use of images in the site structure. 

Optimizing Images

Choosing the correct format for your images, making them as physically small as is consistent with their purpose and the optimising them to the minimum size consistent with good appearance is a vital part of designing for speed.

One thing to avoid is resizing images on a page without altering the actual image size. For example in FrontPage by right clicking the image and choosing Picture Properties you can resize the image on the page. This may seem a simple solution but in fact you have done nothing to alter the size of the file and it will load just as slowly as the original large image. It is far better to open the image in a graphics editor, resize there and save as a new image. 

When thinking about optimizing images, changing the actual physical size of the graphic is probably the most important step of all. If an image can be cropped or made smaller and still retain its message then do it. If the image needs to be large then consider using a small version as a thumbnail and linking to the larger one.

There is any number of different image optimizers available and this is not the place for a discussion of the pros and cons of each. However anyone designing sites needs one and need to learn to use it well. Over-optimizing images in the quest for fast loading makes the images look ugly so be careful not to go too far.

Caching Images

Subsequent pages visited on the same site will tend to load faster than the first page visited because the structural images at least will have cached. You can use this to your advantage by setting up situations where other images will also be cached before the user first needs them.

Take these two images, both of which link to very much larger images. Try them. 

In spite of the fact that the second large image is almost twice as large as the first one, you will probably have found it loaded much more quickly. Why? Because the second image was cached. 

In this case at the very bottom of the previous page this image was inserted as a 1x1 pixel dot, pretty much invisible.

I would usually do this below the footer table so that it will not affect loading of the page in which it is placed. When you have inserted the image right click it, choose Picture Properties and change the size of the image to 1x1 pixels. It is now reduced to a dot on the page and is invisible but is the full image still. When the user clicks the thumbnail on the next page 'ping', up comes the cached image as fast as lightning!

Because you have little control over where visitors enter your site this is not a cure all technique but it can be a very useful one in many cases.

Testing Load Time

To test load times of your pages you need to first publish them and then clear the cache in your computer before loading them, and timing them, from the internet. Put the url in your browser address box, start timing when you hit Go and stop when the word 'Done' appears in your status bar. Use a stop watch for accuracy if possible.

You should repeat test each page 5 or 6 times, clearing your cache beforehand each time, preferably at different times of the day to take account of the amount of traffic online and other factors external to your site. The average load time will be an average of these tests. While you are doing this, time the home pages of your competitors also. 

If you find that in spite of your efforts your pages are consistently slow then there is one major question you need to ask. Is it the fault of your server? Some free and very low priced hosts especially have either overworked servers or connections with poor capacity, though even higher priced ones can be at fault in this regard too. If you feel this is a factor try uploading some pages somewhere else and compare the times of both.

<< Part I