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.
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.
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.
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.