Optimising Images for your Website
The term “a picture speaks a thousand words” is no different on a web as it is in an art gallery. Using images on your website can go along way to describe or sell a product, the image needs to look nice and yet quick to download.
One important part of using images on your website is choosing the correct file type. A JPG file uses image compression to reduce the file size while not losing a lot of image quality. A full quality JPG photo can be up to 10 times smaller than a Bitmap file. JPG files are most suitable for photos although they may be used for everything. A GIF file can have from 1 to 256 colours making it most suitable for graphics. These images can be reduced by removing colours, can be animated and include 1 level of transparency. A PNG comes in two types, the PNG8 is exactly the same as a GIF file, the PNG24 is similar to the JPG file but includes multiple levels of transparency. The BMP and TIFF file are the largest file sizes and should not be used on websites.
To optimise your image an image for the web, there are a variety of different software packages you can choose from, and it’s not necessary to pay money for them either:
- GIMP (GNU Image Manipulation Program) – Free image editor www.gimp.org
- Serif PhotoPlus SE – Free image editor www.serif.com/FreeDownloads/
- Sumo Paint – Free online image editor www.sumopaint.com
- Paint Shop Pro X3 - £79.00 www.corel.com
- Adobe PhotoShop Elements 8 - £77.46 www.adobe.com
One of the common mistakes by people using images is not resizing the photo before using it on a web page. Even if you set the image size to be displayed smaller, the full size image will still need to be downloaded before it can be displayed. Resizing your image before inserting it into the website will cut download time. It should be resized to the exact number of pixels wide or high that you require – always at 72dpi (Dots per Inch)
Levels of JPG Compression
 No Compression (54.3kb)
|
 25% Compression (12.5Kb) |
 50% Compression (8.74Kb) |
 75% Compression (6.04Kb) |
 100% Compression (1.86Kb) |
Levels of GIF Colour Compression and PNG Graphic
 256 Colours (41.6kb)
|
 128 Colours (10.9Kb) |
 64 Colours (8.60Kb) |
 16 Colours (4.97Kb) |
 PNG-24 (38.3Kb) |
Above is an example of various different levels of image compression from the different formats. It is important to test various different formats on your website, in most cases, 25% compression would be good enough to improve download time and not ruin your photograph too much.
Once you have optimised your images and uploaded your website, you can run your website through a Website Analyser such as www.websiteoptimization.com. This service analyses your website, and gives you statistics on how long your website will take to download on different connection rates, and gives you feedback on how to improve your speed further.
- http://www.sxc.hu/ - A collection of free photos to use on public, private or commercial websites
- http://www.1-hit.com/all-in-one/tool.loading-time-checker.htm - Another Load Time Analyser
- http://www.shrinkpictures.com/ - An online photo resize utility
- http://www.nchsoftware.com/imageconverter/index.html - A Batch photo resize utility