Optimising images for the Web

Published 26/05/2004 10:28   |    Updated 13/02/2009 13:09
How do I optimise images for the Web?

In considering your use of images, think about your own experiences and use of the Internet.


Put simply, if you make your visitor wait more than a few seconds for your logo or basic site images to load they're not going to hang around very long.


To avoid this, try to keep all graphics under 20K in size wherever possible. Even graphics that are essential for navigation should really be kept to below 10K. Also, use reduced colour palettes and the right file types. There's a simple rule for deciding which to choose:


If your graphics have multiple colours, you should probably save them as JPG files.


If they include few colours, use them in GIF format. And when using GIFs, try to use palettes that contain only the colours that are actually used - this can halve the size of many files.



Rock.jpg - Full Colour - 10Kb

Bridge.gif - 32 Colours - 7Kb


Image resolution for display on a computer screen is 72dpi, as opposed to for print which is 300dpi and up.


Think about choosing from the range of web-centric graphics programs that are now available to help reduce the impact of graphics on site performance or find out how else you can keep the impact of your graphics to a minimum.



« Selectors, Properties & Values

Giving HTML a try »


Please tell us how we can make this answer more useful.