Introduction

An image is worth a thousand words, but it will often be a larger file than a thousand words of text and thus will take longer to download. It is common for many web pages to have more data in images than text, so reducing your use of images and reducing the size of the images you do use can make a big difference to the experience of someone on a slow connection.

Use CSS for Layout Rather than Images

Use style sheets to replace images that have no purpose other than for layout. Small images that are only a few pixels in size will have an additional overhead — for example a 1x1 pixel GIF image may only be 43 bytes in size but the additional HTTP requests required to download the image will add seconds to the time taken to download it. Furthermore, if images have been turned off in order to save bandwidth then the layout of the page may not appear as expected, especially if the image dimensions are not given in the HTML source.
(Example: Replacing Tables and Transparent Images with CSS)

Use Text Instead of Images Wherever Possible

Avoid using images that consist solely of text for labelling buttons and menu items. The equivalent text will take up less memory so will load quicker and won't disappear when images are turned off. Image maps should also be avoided where they do not improve usability. Effects such as menu rollovers can be achieved with CSS rather than by swapping images. Text can be styled using CSS without the unnecessary bandwidth overhead of loading lots of small images. As a bonus, text will be scaled if the user chooses to increase the font size of the page.
(Example: Using CSS Instead of Images for Menu Rollovers)

Use Styled Colours and Backgrounds Instead of Images

Avoid using images for blocks of the same colour, such as text backgrounds. Similar effects can be achieved with CSS, resulting in less bandwidth and fewer HTTP requests.

Use the Correct Image Format

In general, due to the compression techniques used, the JPEG format is better suited to photographs and GIF and PNG formats are better for bitmap graphics such as logos and images containing areas of discrete colours. By choosing the right format for your images you can optimise compression whilst preserving image quality.
(Example: Using the Correct Image Format 190kB)

Scalable Vector Graphics (SVG) is a relatively new format for two dimensional vector graphics. SVG is an open standard and has great potential to provide low bandwidth graphics. However at the moment support for SVG amongst browsers is uneven and therefore we cannot recommend its use for the time being.

Optimise your Images for Size

Optimising Quality

Reduce the quality settings for JPEG images to the lowest acceptable level. When saving images as JPEG in applications such as GIMP[1] and Photoshop, the image quality can be specified. Experiment to find the lowest acceptable quality. Consider whether it is appropriate to offer higher and lower quality versions of the same image to cater to the needs of different users.
(Example: Optimising Images for Quality 54kB)

Optimising Colour Depth

If colour isn't important, convert your JPEG images to greyscale. Greyscale JPEGs use only one 8-bit colour channel compared to the three channels needed by RGB so the size of your image will be reduced by the conversion. The saving will depend on the dimensions and the content of the image. Graphics applications such as GIMP[1] provide greyscale conversion tools.
(Example: Using Greyscale JPEGs 63kB)

Optimise the colours used in GIF and PNG images. GIF and PNG images are palette based so if there are fewer colours, there will be fewer bits required to store the colours and the overall file size will be reduced. If there are only 16 colours in the image there is no need to use a 256-colour palette. GIMP[1] has a feature to reduce the palette of GIFs and PNGs when switching from RGB to Indexed mode. It is worth experimenting to find the minimum number of colours required without compromising image quality.
(Example: Optimising Colours 139kB)

Strip Metadata from JPEG images

JPEG image files often contain metadata that are not required for use on web pages. EXIF data specifies such things as camera make and and shutter time. The ICC color profile is used for colour consistency between different media. Most images contain one or more embedded thumbnail images. The size of a typical image will be cut in half by stripping out metadata. This has no effect on the quality of the image. There are specialised software utilities that can strip metadata, but most graphic software programs allow an image to be saved without some or all of these data.
(Example: Stripping Metadata 32kB)

Optimisation Tools

There are optimisation tools available online, such as Dynamic Drive Image Optimizer[2], which will apply the palette and quality reduction techniques described above at different levels. You can compare the resulting images alongside the saving in file size for each case.

Use Thumbnails for Large Images

Use small images on pages that will be accessed frequently, such as the front page of your website. Use a smaller thumbnail image, which links to the larger version. This way the user has an idea about what the image will look like and can decide if they want to download the larger version. A 25kB 450x300 pixel image will take around 10 seconds to load over a 20kbps connection. A 2kB 150x100 pixel thumbnail of the same image will load in under a second. To save even more bandwidth, instead of a thumbnail, provide just a text link to the image. In either case give an indication of the larger image's size. If your end users are likely to be using both high and low bandwidth connections, you may want to provide links to both larger and smaller versions of the same image.
(Example: Using Thumbnail Images 62kB)

Scale your Images to the Right Size

Your images should be scaled to the size at which they will appear in the page and the dimensions should be set appropriately on the image tag. An image that is larger than necessary will take up unnecessary bandwidth and because the image will have to be scaled by the browser, this will add to the overall processing time and usually reduce the quality. This is often the result of taking a large image directly from a digital camera.
(Example: Resizing Images to Final Size 884kB)

Specify the Dimensions of your Images

Images often are the largest parts of a web page in terms of data size and take the longest to load. However, a web page can be useful to the user long before the images have finished loading. If you set the correct width and height attributes for each of your images, the browser will allocate placeholders of the correct size such that the layout of the page will be the same while the images are loading. Failing to do this means that the browser will reformat your page every time an image starts to load, making it difficult to use your site until it is fully loaded.

Provide a Textual Description for All of your Images

Over slow Internet connections, images will take a long time to load. A well designed site should be usable even before the images have finished loading. The text descriptions defined by the alt attribute of the img tag will appear before the images have started loading. The alternative text should where possible convey the same information as the image or reduce or eliminate the need to view the image. Bear in mind that the user may have turned off images altogether. Search engines will also use alternative text to index the pages of your site.

Minimise the Number of Image Requests

Each image requires an HTTP request to fetch it. Each request has a certain amount of overhead and latency. If your page has several small images close together it can sometimes be a good idea to combine those images into a single image. The single larger image may not be much bigger than the total size of the smaller images and will require only a single HTTP request.

Footnotes

[#1] GIMP is free software and can be downloaded from http://www.gimp.org/

[#2] http://tools.dynamicdrive.com/imageoptimizer/