Optimising images

Let’s not go too far into the theory of how websites work with your web browser software but a basic description is that when you open a web page, all of the code for that web page is sent to your computer and then your web browser uses this code to reconstruct the web page on your screen. If the web page also includes images, these have to be downloaded before they can be seen. This explains why some websites take longer to open than others, especially if you are using a dial-up connection to access the Internet.

We have already mentioned changing the size of an image in image manipulation software rather than just resizing on a page. This is because any image which is used is first downloaded and then placed on a page. This means that the same image size is downloaded if the image has been resized in FrontPage to look like a thumbnail, or has been made bigger to fill the whole of a background. The process of changing the file size of an image by resizing it in an image manipulation package is called optimising.

If you are targeting either a Merit or a Distinction for this unit, you must show that you have optimised images. For a Merit grade, you must provide screenshots which show that some images have been optimised, while for a Distinction grade, you must show that all images have been optimised.

An example of images that have been optimised can be seen whenever you search for images using www.google.com.  The search is likely to show 18 thumbnail images on one screen.  You then need to click any you want to see in more detail or if you want to download and use them.

The screen below shows a search for "recycle" using Google images.  Notice the file sizes are listed to help you.  The first image is 116k in size - the fourth image is 4k in size.  The two thumbnails look about the same size - but if the actual links are followed to their websites - the difference in size is very obvious - see below the Google screenshot.....

The first image shown above shows it has a file size of 116k - and it is in .jpg format - it is likely to take much longer to download when on a webpage than the second image which is just 3k and a .gif file:

So when you are choosing suitable images to include in your website take great care to optimise them for use - either by choosing smaller sizes of image in the first place - or by reducing the file size by resizing in image editing software.  Just changing the size of the image displayed on your web page will not reduce the file size of the image itself.