Image Optimisation for the web

Correctly optimising images is one of the most important aspects of creating any website and is one of the first things any aspiring designers must learn. Having experience with graphic editing software isn’t necessary – anyone can make their web pages load faster in a few easy steps! The main areas where you can optimise images for the web as follows: the number of colours used, the file format (GIF or JPEG) and the resolution.

Colour Quality
The amount of colours an image uses is the primary factor contributing to its size. File formats such as GIF usually use 64 or 128 colours in a file, but for many images this is much more than needed and bloats the file size unnecessarily. Using a graphics editor such as Photoshop, change the number of colours in an image until you find a good balance between quality and image size.

File Format
Choosing the right file format for your image is another great way to improve loading times and quality. It is generally accepted that photographs and high colour images should use JPEG compression to reduce size and maintain quality, whereas line drawings and low colour images, such as logos or icons should use the GIF format. GIF files are usually smaller sizes because of their low colour usage.

Each format has quality settings you can adjust to optimise images for even more of an improvement in quality or size. JPEG compression uses what is known as ‘lossy’ compression – the lower the size, the lower quality the image will be because of compression artefacts; blurs and shapes caused by the effects of compression.

GIF Compression has a number of options including amount of colours, transparency and a dither. Dither is a good way to balance a small number of colours out by slightly blurring between them to create a dither effect, reducing the visible signs of low colour optimisation.

Resolution
Image size, also known as resolution, is the final issue to take into consideration when optimising images for the web. Put simply, a higher resolution equals a bigger file size, regardless of how many colours or level of compression the image is using. If you are working with photographs, consider cropping them to fit in a smaller space, or use an image editor to reduce the resolution – making sure to keep the same aspect ratio to ensure the image doesn’t look ‘stretched’.

Image optimisation isn’t an exact science, and may take some time to find the right balance between looks and load time. In no time you will find that you can optimise images quickly using the instructions outlined in this article!

© Copyright 2003-2010 Ausnetech Pty Ltd   A.B.N. 35 104 843 450