Resizing Images for your Website

web-carousel

Web images take up the majority of the download time in most web pages. If you optimise your web images for your WordPress site you will have a faster loading website, which is better for your viewers as well as for SEO (search engine optimisation) purposes; the longer the site takes to load the lower your sites ranking will be in search results.

There are lots of ways to optimize a web page. One way to improve your sites speed is by making your images as small as possible. There are numerous ways to do this including uploading images to an online site such as picresize; once uploaded it reduces the size and you can then download the new version. However, if you prefer doing this manually, as I do, you can use a software package such as GIMP, which is a free and OpenSource image editor.

 

gimp-homepage

 

Steps to Reduce the Size of Images

To illustrate how this is done I have an image below which is 7.5MB; this is really too large for a website. We need to reduce the size without impacting on the quality.

image-flower

 

To reduce the image size follow these steps:

  • Find your image and open with GIMP by right clicking on the image and selecting ‘GIMP Image Editor’

open-image

 

  • Go to Image > Scale Image.

images

 

  • A Scale Image dialog box will appear like the one shown below.

 

scale-image

  • As you can see from the above image the width and height are 6000px x 4000px with a resolution of 300px.
  • If we want to put this image on our website, we can make it only 600 x 400 pixels and with a resolution of 72ppi. First, we can change the resolution by typing in 72 and then, we can change the pixel dimensions by entering 600 x 400 as the width and height.

image-scale-2

  • Before finishing, we will want to select our resampling method. What does this mean? Basically, GIMP will discard any unused pixels in order to reduce the image:
    • Cubic – The color of each pixel is computed as the average colour of the eight closest pixels in the original image. This usually gives the best result, but it naturally takes more time. Sometimes this method is called “Bicubic”.
    • Sinc (Lanczos3) – The Lanczos3 method uses the Sinc mathematical function and performs a high quality interpolation.
  • Click OK to accept the changes. As you can see from below the new image has been re-sized to 130.9kb without significant loss of quality for the web.

Do you have another way to re-size your images for the web?  Leave comments below.

Scroll Up