It is common knowledge that the bigger and more are the number of images associated with a web page the slower it will be to load. But with the advancement of high performance cameras and image editing softwares, the options to incorporate even the most complex images are readily available. Websites like those related to sports, entertainment, news, arts and science depend entirely on these softwares to keep their sites up dated as well as run efficiently. With many feeling the irresistible urge to present the “exact picture”, the need to include more and more images on web pages has increased. Hence, optimising the speed and image size is necessary for a website to run efficiently. Use of minimum number of images and only when necessary greatly reduces page load time.

The process involves using higher resolution pictures and working on them to reduce the size and colour variations to obtain a picture suitable for your web page. Using image edit programs that help in resizing the photograph, the desired picture is finalized, including the height and width. Unnecessary colors are eliminated to reduce the file size. A process known as dithering is used to minimize formation of bands of colour that may appear, albeit with a loss in image sharpness. The process involves juxtaposing pixels of different colours to form an illusion of totally different colour.

The image is then stored in the Graphic Interchange Format (GIF) or Joint Photographic Experts Group (JPEG) format. A GIF file is smaller in size and can be used with about 256 colours, while the JPEG file is considerably heavier and can be used with millions of colours. When a GIF while is compressed there is no loss of data, although colour quality is affected. A compressed JPEG file retains colour variety but loses picture clarity. The lesser the colours involved the clumsy the file becomes.

Computer monitors display images at 72 dpi and hence displaying large images as a single file is time consuming. Therefore it is these pictures are divided into smaller parts represented by a smaller file, which will loaded at a much faster pace.

Photographs and images can be edited using softwares such as Picasa, Photoshop, Windows Picture, etc. The need for using the image as a full blown one, comparatively smaller or a thumbnail has to be identified. The right balance between the number of colours involved, clarity of image and the height and width will give right image with an optimum file size. Edit the height and width so as to reduce them to 300 to 200 pixels, suitable for web viewing. You can further reduce it if it is to be used as a thumbnail. Crop the image to remove all unwanted and outlier information. Reduce colour variety and depth to minimize file size, except where it is absolutely necessary to keep it as it is. Restrict the maximum image size to below 50 kilobytes.

Another method is to create images in a size smaller than actually required and is displayed on the web page. Then, using the HTML IMAGE Tag, changes in height and width are implemented, to show the image at the size you want them to appear.

Peter Brittain
Perth Digital Agency