Getting images ready for use on the web

Introduction

Images are fundamental to the modern web and they are used on nearly every single website you visit however it is important that images are saved correctly to make sure they will work correctly on the web.

Preparing images for use on the web is easy and possible to do with freely available tools meaning you can get your images ready quickly and for free!

the tool we will be using to resize the images is called the GIMP which stands for GNU Image Manipulation Program, it is a freely available program for editing images and has similar functionality to commercial programs such as Photoshop. The GIMP is available for Windows, Mac and Linux meaning everyone can take advantage of this brilliant tool.

Download The GIMP here

After downloading and installing the GIMP open the program (note: this may take a while the first time you open it) next we will need to find an example image to use. if you dont have one you can use this image: alex3410.com/wp-content/uploads/2012/01/Example_Image.jpg (right hand click and save target as – note file size is 5.7MB )

Step 1

The first step is to open the image we want to prepare for use on the web, to do this open the GIMP and select file and open and then locate the image

Step 2

with the image open the next step is to reduce the image size to do this click on:  image -> scale image

this will bring up a box asking for some values:

The important values on this box is the resolution and the width, the first thing we need to do is ensure that the resolution is set to 72 (or 72.000 its the same) as this is the resolution images on the web use. The next value we need to change is the Width this will determine the size of the image in this example we will use 800px as a generic size that should be suitable for most images but if you know the size you need enter it here. When you enter the width the height will be updated automatically to make sure the aspect ratio is not changed (this prevents images from looking squished) if you need to enter a specific height and width then click on the chain icon to the right of the values which will unlink the two values and let you enter anything you want.

with these values entered press scale to continue.

the image will then resize, it may appear smaller in the preview window but you can change the preview to 100% by changing the value at the bottom of the window.

Step 3

now the image is the right size we now need to save it, to do this click File -> Save as

you will then need to enter a file name, the important thing here is to give it a unique name and add .jpg to the end if it so that it is saved as a jpeg image ready for use on the web.

next you will need to define the quality of the image you will be saving, this is done as a percentage, the lower the value the smaller the file size but the lower the quality of the image something around 50% should be suitable but if you are worried/unsure put 70%

the new image is now 53KB which is small enough to use online and will load much faster then the original image of over 5BM (there are 1024KB for 1MB so the new image is 1/10 of the size!)

this is the final image saved at 70% quality

 

this image is saved at 15% and is 25KB

from this you can see the image has a smaller file size (about 1/2 the size) but the image quality is poor

any questions or comments let me know