Resize, Optimise and Name your website images

We often get asked, by our clients, what’s the best way to deal with images they need to add to their website. Here’s a quick rundown of what we think’s best…

Firstly I’m presuming you already have an image ready to use. If not, there are a number of paid for and free images library’s on the web that have some great stock images including Unsplash (free) and freepik (paid).

Also presuming that you don’t have Photoshop or simply not comfortable using that software.

1. Rename your image. Always best to name your image something descriptive rather than just a random name e.g. couple-with-baby.jpg is much better than 783492748.jpg. I always use all lower case and hyphens instead of spaces.

2. Take your image and upload to Squoosh – I love the side-by-side feature which shows you how your uploaded image looks alongside the optimised version.

3. Resize your image by clicking on Resize and then changing the width/height. Now, you don’t have to do this but the image you have may be enormous. There’s no right or wrong size for this but I generally suggest around 1600px on its longest side.

4. Optimise your image by clicking on the Compress dropdown. If you’ve uploaded a photo then go for the MozJPEG option and try around 75 Quality (but have a look at your optimised image alongside your uploaded image to check the quality as you may need to adjust this. It’s about getting a balance between quality and image size). If you’ve uploaded a logo, illustration or something with transparent background then you may need to select the Browser PNG option but never use PNG’s for photos as they are massive in file size compared to a JPG.

Once your happy click the Download icon and you then have your optimised image.