Image Editing
Learn how to resize and compress images

This section gives you the tools and skills required to properly prepare images for use on your website.

Tools

To prepare your images you will need to use a graphic editing program that is able to compress resize and compress images.

  • Serif Photo Plus 5.5 is easy to use and free and you can download it from their site. We have provided a tutorial for using this software to resize and compress your images.

The most important thing you have to do to prepare images for the web is to reduce the size of the image. By size we mean the file size which is measured in kilobytes (KB). You can see the size of a file in Windows Explorer when you browse in "view > details" mode.

The larger the size of your web page the longer it will take to load on a viewers browser. The size of your web page is made up of the amount of text on the page and the images on the page. Text takes up very little file size, but images can take up enourmous amounts if not prepared properly.

As a general rule you should try to keep your web page size below 60KB. For a user on a 56K modem it would take about 15 seconds to load a 60KB web page. Surveys have shown that most users will not wait any longer than this for a page to download. Therefore if you have 3 images on that page each image should be less than 20KB.

A picture you take with a digital camera may be as large a 1000 KB and therefore you definitely don't want to put it straight onto your web page.

The two steps of optimising an image

Resizing

  • An image that takes up the entire screen that is going to have a larger file size than one that takes up a small part of the screen.

Compressing

  • This involves reducing the number of colours used and increasing the "graininess". As you compress the image further the quality of the image is reduced. Therefore you need to find the amount of compression that gives you the smallest filesize possible while still maintaing a high enough quality.
Quick reference for image optimisation
Image type
  The most communly use type of images for the web are JPEG and GIF formats - JPEG for pictures and GIF for computer graphics
Image size
  To ensure a quick download time of you images it is best practice to keep them small. A 20Kb image...
Image quality
  The image quality depends on the compression level wich determine the number of colours used for the image.
Image Resizing
 

Image Compressing