How To Optimise Your Images For Site Speed

More often than not, images are going to be the main reason why your website is producing poor results when it comes to speed. I’ve tested many sites and images are often the priority in speed testers. Most of the time, images can be optimised to save a few kilobytes of data.

However, occasionally I’ve found a single image to be over 1MB, and as the recommended size of the page itself is around 3MB, this can have a huge effect on the speed of your website as the user will have to wait much longer for an image which doesn’t need to be that big.

There are two considerations when optimising an image: image dimension size and image file size. The dimensions of the image matter because the image should be around the same size as it appears on the page. For example, if you have an image of 1000px width, but on the page it’s displayed at 200px width, then you should resize the image so that it’s roughly the same size as it appears on the page.

For the image file size, you need to check how big the image file is as higher quality images will have a higher file size. An easy way to check this is to run your website in Google PageSpeed Insights. This will tell you whether you have images on your webpage that could be compressed. You will have to run each page on your website to check for any unoptimised images, as it only checks per page and not the whole website.

Image Dimension Size

The actual size of the images can slow down your website if they are too big. I recommend that the images you upload to your site are the same size as for how they’re going to be used in the front-end of your website.

For example, if you have an image that is the full width of the screen, the image should be 1920px wide as it will be wide enough for large monitors and will also be good quality. If the image is huge, e.g. 3000px wide, then although it may look high quality, it will affect your website speed as the images are much larger than what they need to be, which means they take longer to load.

The images don’t have to be resized to exactly the size they appear on the screen, but close enough so that the file isn’t excessively large. Also, remember that the image appears on responsive devices as well, so if you resize an image, check on mobile and tablet devices as well as your desktop to make sure you haven’t made it too small.

The Google PageSpeed Tester can help you with this, as when you test your site, at the bottom of the page you can download files already optimised for you. If there are images that need to be resized then the tester will resize them to an appropriate size for you.

Google’s tester only checks the image on the page and not your whole website, so if you ran your homepage in the tester, then it will only give you optimised images for the homepage. You will need to run your other pages in the tester as well to get optimised images for the rest of your website.

Image File Size

The file size of the images on your website is also a factor you need to consider. I recommend that most images on your website need to be around 40 to 70KB. However, for large full-width images, this might be hard to achieve. If you have Photoshop then you can compress any unoptimised images easily by ‘saving-for-web’ the image that needs compressing.

You can choose how much the image gets compressed, however, the more you compress an image, the lower quality it will be. Additionally, make sure any images that don’t have any transparency are JPGs instead of PNGs. JPG images have a smaller file size and don’t support transparency, whereas PNGs are usually larger but do support transparency.

As well as resizing images, the Google PageSpeed tester also compresses images for you, so if you don’t have Photoshop then you can download the zip file that the tester offers and use these images to replace the ones currently on your webpage.

Helpful Plugins

To help speed up the process of optimising your images, there are plugins available that can help you if you are using WordPress:

1. Enable Media Replace

If you have a lot of the same image on your website, then it’s going to take you a long time to change this one image to the optimised version on every page it’s on. Enable Media Replace gives you the option to change an image in the media library, instead of on the page, so you can replace the unoptimised image file with the optimised version. As you’ve replaced the image file, it will change on every page the image appears, so you only have to change the image once.

2. WP Smush

This plugin automatically compresses images you upload to your website and can compress images already uploaded to your media library. If you have a lot of images to upload, it would be worth installing this plugin beforehand so that you don’t have to revisit the images to optimise them. There are also other image compression plugins available, however, this is the one I recommend.

Conclusion

Although having unoptimised images on your website can mean that your website is a lot slower to load, it isn’t that hard to optimise them. However, it will take a long time depending on how many images you have. I recommend that before you upload an image on your website, you check the dimension and file size so that it won’t affect the speed of your site and you don’t have to revisit the image later.

If you want further information on how to optimise images, such as adding alt tags, I have written a blog post that includes a section on optimising your image for SEO purposes. Alternatively, if you’re looking for other useful tips on improving your website’s speed, check out my blog post on How To Check The Speed Of Your Website.

If you have any questions on how to understand what is slowing down your website or how to speed things up then drop a comment below or get in touch via our contact page. And remember to follow Bowler Hat on Facebook and Twitter for more digital marketing help and advice.

And if you are considering a new website, view or download our comprehensive website planning guide.