Optimising Images for Websites

17 March, 2011 by Unknown

Images displayed on websites need to be 'optimised' for display on screens. A website image that almost fills the screen may only be 50-70 kb in size. This is about 1/1000th of the file size of the original digital photograph. This also means the 'optimised' image is 1000 times faster to get to your computer from the internet.


There is some great free software to optimise images. We have tried and tested quite a few of these and would recommend using Riot software to optimise images for website display.

Riot is the best free software that I have found to optimise images before loading them into a Content Management System. It enables you to resize/crop images and optimise them for web display (72ppi). You can also optimise and/or resize a batch of images at once.


Here is a review and download link for the RIOT software:  http://download.cnet.com/RIOT/3000-12511_4-10911908.html

Following is a simple guide of how to use the Riot software.


  1. First decide on the size of the image you wish to create. This needs to be the size in pixels. As a guide the width of your website is 950 pixels. Most images will be around 300 – 400 pixels wide.
  2. Use ‘Open’ to select the full size image you wish to resize. You may be asked if you want to resize the image if it is quite large – this is not usually necessary unless the file is greater than 10Mb.
  3. Use ‘Edit/Resample’ and enter the Width of the image you wish to create e.g. 420 (pixels). The height will automatically be adjust to keep the image aspect ratio the same as the original. You will see the actual size of the image in the ‘Optimised Image’ display.
  4. Use a Quality setting of 80% as a starting point for optimising .jpeg images. This should give quite a high quality image with significantly reduced file size.
  5. Use ‘Save’ to give the optimised image a new file name. We recommend using a good descriptive name (helps the Search Engines).
Category: Web Design

Client comments