Cropping and Resizing Pictures for Web

Cropping Pictures and Resizing Pictures for Web

This tutorial is for people who do not have access to photoshop, and who need to resize and optimise pictures to put on their website. As a rule of thumb, pictures should be no more than 100kb, ideally smaller images should be around 25kb.

In this instance, we are going to focus on product images for Woocommerce. For most of my clients, I set the Product images to be 600px x 600px.

To Crop your Image

Go to http://imageresize.org/

Click on browse and select photo from where you’ve saved it on the computer.

Cropping and Resizing Images for Web | No Photoshop

Check ‘Crop Image’, change Aspect Ratio to Custom and type in 600 x 600.

And change ‘Resize the Image to ‘Custom’

Uncheck ‘Preserve aspect ratio

Cropping and Resizing Images for Web | No Photoshop

Use your mouse to move the square box around to fit your photo in the new size

Cropping and Resizing Images for Web | No Photoshop

To Optimise your Image for Web

Once you are happy with the crop, make sure Image Format is set to jpg and then click on ‘Process Image’

Cropping and Resizing Images for Web | No Photoshop

The picture will now come up on another screen.

Use your mouse and right click, select ‘View Image’ – and a larger pic will pop up. Right click on that image and click ‘Save Image as” – and save to a folder on your computer.

Cropping and Resizing Images for Web | No Photoshop

Look in the folder that you saved the picture, and see how big the file size is.

If the picture is over 60kb, you will need to optimise it for web. In the screenshot above, you will notice that the picture that I saved is 102kb – too big for your website!

Cropping and Resizing Images for Web | No Photoshop

Simply go to http://optimizilla.com/

Click ‘Upload Files’

And select the photo that you need to optimise (in my case, it is the scented-candles.jpg)

Cropping and Resizing Images for Web | No Photoshop

Once it has bought up the optimised pics, you will see two pictures, one is your original (left) and one is the optimised picture (right) – having the two photos side by side will allow you to check the optimised image to make sure it hasn’t lost too much quality.

You will also see the optimised size on top of the right picture. I always reduce quality to around 60 (red text).

Once you have changed the number to 60 – click ‘Apply’.

Cropping and Resizing Images for Web | No Photoshop

The new picture (on right) is now only 55k – which is the perfect size.

Right click on the image on the right, select ‘View Image” – a larger image will appear. Right click on the image – and save the image to the folder on your computer.

*Note: Make sure you save your candles with keywords – for example ‘scented-candles.jpg’ – saving them as a name that people will search for, is more likely to get your pictures shown in the Google Image search. Google DOES NOT recognise space, so instead of using the space key, use – (hyphen) instead.

Your image is now ready to be uploaded to your website.