Search
Close this search box.

Getting image optimisation right

Posted 4 years ago

Author
Tagged
Share
Search
Search

When you scan your site through Google PageSpeed Insights or GT Metrix you’ll likely notice warnings for image sizes and if not, well done! We’re going to discuss how you can avoid these warnings and get image optimisation when designing your website right.

What is retina?

It’s worth covering retina devices and why they’re important. Most modern devices run retina quality screens which are basically HD screens compared to SD screens.

In order to support them, your images must be twice the size of the space you’re placing the image. So if you need a 300 x 200 space, in order for it to support retina it needs to be 600 x 400. The issue you face with this is the file size, you’ll often find these are bigger in file size because they’re twice the size.

Example of image scaling for retina

Optimisation 

With an understanding of retina images you can focus on the optimisation. We suggest using a tool like Adobe Photoshop in order to do this.

Load your image into Photoshop or your preferred tool and the first thing you want to do is bring the size down to what it needs to be, no bigger, ie 600 x 400 as mentioned above.

Once you’ve done this use the save for web functionality and you’ll be able to select the file type. If there is any transparency it’s fine to use PNG but if not always use JPG. There is no need to use PNG for regular images. Then you want to adjust your image quality scale. You are usually okay within the 60 – 80 range, but if it’s a hero image or something you want a lot of attention on it’s okay to max it out to 100.

How to save your image for web in Photoshop

If you’re happy, save it out and name it something appropriate. This isn’t necessary for optimisation but helps with the websites SEO and is good practice.

Uploading your image

Before you upload your image to the media library, it’s worth considering using a plugin to help optimise the images as you upload them. Our suggestion would be WP Smush, it does have a pro version but from our experience, the free version should do what you need it too. This will help reduce the file size that extra little bit.

Placing your image

When you insert your image to the post or page you may find you can pick a thumbnail size. Make sure you select the appropriate size here and you aren’t uploading something too big or too small for the space.

Selecting the correct image size

That should be it, your image should be on your website looking good and it should be well optimised. Once you understand the process it’s not too bad and it’ll make your website load much faster on your web server for your users.

Jigowatt are always happy to offer short training sessions if you’re stuck.

“What's the next step?”

It’s simply to get in touch. We find it’s best to talk through your ideas then decide on a plan to get the right solution for you. So why not call us on Peterborough: 01733 267775

Jigowatt.co.uk uses cookies to make the site simpler. Find out more about cookies.