How to Reduce Image Sizes so your Website Loads Faster

Does image size affect SEO?

As with most things when it comes to decent search engine optimisation, we turn to user experience (UX) when looking at one of the major ranking signals search engines like Google uses; that’s load time or page speed. There are a few things that could affect this, but images are usually quite large (compared to text) both physically and by resolution and therefore contribute significantly to the load time of your page.

Reducing the size of your images can demonstrably reduce your load time and can, therefore, have a great effect on how enjoyable (user experience) it is to use your website.

Changing the physical size

When you take a photo with your phone, there’s a good chance the image is going to literally be bigger than you need it to be; way bigger. This is largely due to the quality of cameras, and capturing more detail than you actually need. I took a picture with my phone, shot in 16.1 megapixels it has a resolution 4640 x 3480 pixels and comes in at a whopping 5.9 MB. This is simply too (unnecessarily) large to place on a webpage, so we need to reduce its size.

  • Canva
    Canva is an amazing tool and can do amazing things. Amongst many others features, it’s great for template based design – so if you tell Canva that you’re going to use an image for Facebook, it will create you an image that’s 940 x 788 pixels (because the size that Facebook loves the most).You can also do cool things like drop your images into a frame, like this – just so all your readers know that this image was definitely taken with a phone (it’s part of your storytelling, remember).

     

    When you’re showing an image on a webpage, there’s a good chance that the image itself is going to be wider than the width of your website anyway. If your site is 1200px wide, and your image is 4640px wide, what happens to the remaining 3440px? It gets squashed into the space – so it could have been reduced in size and still look great – and remember that extra information all needs to be loaded on a page – and this affects your page speed dramatically.

  • Pixlr Editor
    Packed with a few more advanced features (but arguably not quite as easy to use) are tools like Pixlr. A web-based Photoshop if you will, Pixlr allows you to lift out backgrounds (to make them transparent), as well as quickly and easily reduce that physical file size down to something that’s a better fit, and therefore quicker.

Compressing the image

My favourite process at the moment is giving images a quick squeeze. After we’ve reduced the physical size of an image, we can actually deliberately reduce the quality of that image that, to the human eye, it still looks great, but is a much smaller file size. There are two super simple ways that we do this.

  • WP Smush
    If you’re a WordPress user, you can install plugins that help you stay on top of image sizes. WP Smush is an example of such a plugin, it has a free version and you just need to add it to your WordPress (self-hosted, not wordpress.com) installation and run it (it compresses 50 images at a time).
  • Tiny PNG
    If you’re not using WordPress, or even if you ever just need to squash an image quickly, but want to ensure it’s quality is maintained, check out tinypng.com – this free-to-use website allows you to add/drag a .jpg or .png image file, it runs a super-fast compression on that file, and then lets you download it and use straight away.


For any images that you’re using within your web copy, you really do need to think about file size, and dimensions – these tools will help you ensure that you don’t get caught out and that your website is as trim as possible and super-snappy.

Category

Related Articles

Upcoming Courses