In our last blog from we focussed on the importance of optimising the images you display on your website. How do you actually go about optimising your images though? Well, that’s what we’re going to tackle in our new series, which will provide step by step guides on using some of the different image optimisation tools available – GIMP, Photoshop and Image Optim.

For the first tutorial we’re going to be using GIMP to convert a high resolution image into a manageable size for practical use on a website. The guide contains helpful screenshots showing the different stages as well as accompanying instructions so that you can get to grips with the tool in your own time.

 

TUTORIAL no. 1 – Image Optimisation Using GIMP

– Save a copy of your original image and give it a logical file name. This is the first rule of image optimisation and will prevent confusion later on.

– Open up GIMP and then open your image.

image-optimising-step-by-step-blog-nov-16-a

– Click on ‘Image’ in the toolbar then click on ‘Scale Image’ in the drop down menu (see above). At the moment our image is enormous – 4749 x 3167 pixels. As a rule of thumb, 800 to 1000 will suit most screens and everyday usage.

image-optimising-step-by-step-blog-nov-16-03 – Set the scale of the image to the required settings. For this image we’re going to set it as 1000  x 667 (the height automatically sets) – see below. Once you’ve established the size you require then click ‘Scale’.

image-optimising-step-by-step-blog-nov-16-04

– Next up you need to save the image using a manual save procedure. The image should be saved as a .jpg (or png. if you need it to be transparent). To do this just go to ‘File’ – then select ‘Overwrite Gimp’ (see image).

image-optimising-step-by-step-blog-nov-16-06

– A box will pop up (see image below) with a slider bar enabling you to adjust the image quality. In the example below we set the quality rate at 80% – beyond this point and the quality will begin to deteriorate. In the screen shot below we’ve zoomed in to check the image quality and as you can see, at 80% it remains visibly high quality.

image-optimising-step-by-step-blog-nov-16-07

– We’ve been able to reduce the image file size down to 227.2 KB from a starting point of 11MB – an incredible 48 times smaller than the original size!

gimp-high-res-image-rocky-mountains

Next Tutorial – ImageOptim

Next in our series about image optimisation we’re going to take a look at how you can use ImageOptim to prepare your images if your using a Mac.

Watch out for the next blog and in the meantime perhaps take a look at our blog about setting up an in-house photography studio. Essential reading if you need high quality but low cost images of products for your ecommerce store.

Save

Save

Save

  • SBA 2016 Winner
  • chamber