Resizing images

Resizing images

Resizing images

Need to upload images to your webpage? Make sure your images are the correct size and are optimised for the web.

Follow these steps to ensure your images are saved in the proper manner for web i.e. dimensions and actual file size.

  1. Figure out what dimension your image should be so that it not only looks great but loads quickly too. You can see the image size guide for dimensions
  2. Use an image resizing tool to get your image to the right size. It is ideal if you can do this in Photoshop. If not, below are instructions for image resizing on both a PC and a Mac.

Resizing images on a PC with Paint

Open the image you want to edit in Paint.

1. Right click the image
2. Select ‘Open with’ then find ‘Paint’

Cropping the image

  1. Using the selection tool click and drag the part of the image you want to use

  2. Once you are happy with the selection of your image, simply click ‘Crop’

Resizing an image

If you need to resize an image to predetermined dimensions:

1. Click 'Resize'

2. Make sure ‘Pixels’ are selected. Type in your required dimensions

3. It is best to keep ‘Maintain aspect ratio’ selected as this will ensure that your image does not get distorted

4. Hit OK

5. Select ‘File’, hover over ‘Save as’ and select ‘JPEG’ as this is the best option for web.

Resizing images on Mac using ‘Preview’

Open the image you want to edit in the ‘Preview’ application.

1. Right click the image

2. Select ‘Open with’ then find ‘Preview’

Cropping the image

1. Click and drag the image to your desired selection.

2. Once happy with the cropping of your image, simply click ‘Crop’, and your image will automatically crop.

Adjusting image dimensions/size

1. Once the image is open in ‘Preview’ use the top menu and select ‘Tools’ then ‘Adjust size…’

2. There are preselected sizes you can use, however it is likely you will need to use the ‘Fit into: Custom pixels’ drop down at the top.

3. Once you have done that ensure that the dropdown menu is switched to ‘pixels’ – this is to ensure we are using the right measurement for web images.

4. Always ensure that the ‘scale proportionally’ checkbox is ticked. This is to make sure that when you resize your image, it doesn’t stretch – resulting in a fairly undesirable and unprofessional look for your webpages.

Compressing/saving the image for web

When it comes to images, we need to ensure that they are saved appropriately for web. When it comes to actual file size, ideally all images used should be under 100Kb – this is to ensure that page load time isn’t effected by numerous images that are too large. This then results in a poor experience for the user, and also effects how Google will rank the page on their search.

In order to compress/save the image for web, you can take the following steps:

1. Once the image has been cropped and resized to your desired dimensions, and you are ready to save it and upload it on your website, click on ‘File’ in the top menu, and select ‘Export…’

2. From there you can then name your image file, and where you would like to export it to.

3. The main thing to note when exporting is the ‘Quality’ slider – if you slide it to the left this reduces the image file size, but also the image quality when it compresses it.

4. As stated previously, ideally all images should be smaller than 100Kb in file-size. However there some exceptions when it is a particularly large image eg. For a banner, or carousel. When the image is large in nation, there should be a balance of a) file size and b) image quality to ensure that it isn’t too pixelated.

5. Once you are ready to export the image, you simply click on ‘Save’

Back to the top of this page