Image Metadata

While some search engines do have the ability to process images and determine their content, most cannot (and those that can still rely on the metadata of similar images for relevance). Therefore, it is important to include metadata within the page that describes the image:

Alt – has traditionally been used by search engines to determine the content of images.
Title – is typically used more by users to see the content of images, but still provides a signal to search engines as to the content of the image and page.
URL – image URLs should describe the image as best as possible, they should be named as per the recommended URL conventions (see page 67).

<img src="/img/polar-bear-sleeping.jpg" alt="Polar bear sleeping on ice" title="Holiday Picture: Polar bear sleeping on ice in Alaska" />

Minimising Images

Images are a double-edged sword on the Internet – while they make things beautiful and improve the overall user experience, they can drastically increase a page’s load time.

One of the core ways to minimise the effect of images on page load time while still maintaining the aesthetic quality of the page is to load as few images as possible.

Use CSS in place of simple graphics – where images are relatively simple (i.e. vector graphics), use pure CSS instead of adding external image resources.

Image sprites – for throwaway images such as icons and social network buttons (or anything which doesn’t form part of the page’s core content), you should place them all within a single sprite file and use CSS regions to display them. This means that the client is able to download all icons in one request and can cache this file for future use.

Loading last – non-essential images should be loaded last. This can be achieved in many ways, but by far the easiest way is to set an image as the background property of an area; background images are normally loaded by browsers last (even after the page has begun rendering), so this is a quick and cheap way of achieving speed improvements.

Loading lazily – an extension of the ‘loading last’ concept, lazy loading involves using a script to load the resources only when it looks likely that the client will need them. For instance, waiting until the user begins scrolling down before loading content which is two or three screens below the fold.