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
(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
Reduce the quality settings for JPEG images to the lowest
acceptable level. When saving images as JPEG in applications such
as GIMP 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
(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 provide greyscale conversion
(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 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)
There are optimisation tools available online, such as Dynamic Drive Image Optimizer, 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.
- Rather than using images, whenever possible: use CSS for layouts and backgrounds and use text for buttons and menu items
- Optimise images for quality and colour depth, using tools like Dynamic Drive Image Optimizer
- Properly scale images for layout and specify the dimensions
- Give a textual description for all images
- Always try to minimise the number of image requests