Website Design Principles - Image Size and Optimisation

The same problems apply to image size as were raised in our "Code size and efficiency" article, only one third of home internet users have broadband and so code filesize and more importantly image filesize must be reduced to the minimum when designing a website.

The problem is that although the filesize of images can be reduced this will usually result in a decrease in image quality. So the trick is to find the optimum balance between size and quality.

This means considering:

• who are your users?

• what size does it need to be displayed at?

• is the image key to the user experience?

• is the image actually needed at all?

If you are a photographer selling prints on your website then the criteria will be different from a washing machine sales website.

Screen size of the image - reduce the physical size to reduce filesize

Image type - photos=jpeg, text/vector art=gif

Quality - quality can be reduced in many image editing software packages.

How much difference can it make?
I recently visited a website where the whole webpage, and in particular a small logo, seemed to take a very long time to load. Normally, if a page takes a long time to load then I give up, press the Back button and go elsewhere, but out of curiosity I patiently waited. I then checked the properties of the logo and found that the filesize was 160KB! To put that in to context, it will take nearly 23 seconds to download just the logo using a standard 56kb dialup modem. I tried optimising the image myself and created the same logo with a filesize of 5KB (<1 second on a 56kb connection). Note: for those confused by my maths, internet connection speeds are measured in kb/s which is KiloBITS/second, not KiloBYTES/second. There are 8 BITS in a BYTE, therefore a 56kbs connection is actually 56/8 = 7KB/s. So a 160KB image / 7 bytes per second = 22.86 seconds.

How to optimise images

• Keep the image dimensions to a minimum, if you need to resize then change the actual image size rather than just changing the image size tags in your web page.

• Photos should normally be JPEG, adjust the quality in Adobe Photoshop or similar.

• Other images can be GIF, if not sure then create GIF and JPEG and compare filesize and quality to help choose.

Get help!
A professional website designer will have access to industry standard image editing software, Fearntech are licensed Adobe Photoshop and Adobe Illustrator users, contact us for a no-obligation quotation.

Previous item - Code size and efficiency

Next item - Flexibility (CSS)

Back to Design Principles index