Serve scaled images in WordPress to speed up your site

and improve your PageSpeed score

So you’ve run Google PageSpeed test for your website and got ugly notice like this:
Serve scaled images in WordPress to speed up your site

Where is the problem?

Google is giving us this warning because the page has extremely large images. It happens often when we upload images to WordPress without first shorting the files.

Say, you found some awesome picture to illustrate your blog post and uploaded  it though the WordPress Media Library. Say, this image size is 1920×1200. But your content max width is only 678 px in current theme. So you don’t need that large image to be loaded as the max size that will ever be shown to the user is just 678 px. Google gives you a hint:

your_image.jpg is resized in HTML or CSS from  to 678×424. Serving a scaled image could save 257.2KiB (87% reduction)

What’s this mean?

It means that image of larger size was fully loaded and afterwards it was made smaller in the HTML and CSS. This makes images look smaller but the file size does not change. This is how the time and resources are wasted to load over-sized images.

Not serving scaled images is the most nasty thing that will slow down your website significantly. This post will help you to get such results:

Ideal solution: resize images before uploading

To make your WordPress site faster it’s incredibly important to upload the image in a size we are going to use it. To lower the page size and increase speed you should define the maximum size of image and use the image editor to resize it.

  1. Define the necessary size of the image by examining the image container in browser:In this example the width of the section is only 524 px. All full width images can be shrunk to 524 px wide.
  2. Resize images with your favorite image editor. I prefer Adobe Photoshop. If you are not that fond of professional software, try out free and simple RIOT editor.
  3. Insert the resized image into the post. Update the post and as you can will see no visible difference in quality. But your page will become much smaller and Google PageSpeed will give you some decent score.

    Other options

This is ideal solution to serve scaled images in WordPress. But what if your images are already uploaded? Or you are working on some  more structured data like online store, real estate directory and so on with tons of images used?

In this case you may definitely want to check the bulk image resize options to get more automatic solution.

Serving images of the correct size can make an enormous difference in page speed. Try it yourself and remember to share your results in comments!

P.S. It may sometimes be necessary to use very large images, for example on photography site, schemes or infographics etc. so user can click it and view the full-size version. In this instances it’s important to use a CDN.

5 Replies to “Serve scaled images in WordPress to speed up your site”

  1. Hello,
    Thanks for your awesome post. I just want to know how we can perform “bulk image resize” in wordpress. Please reply, it will help me alot. Thanks again.

  2. Hey, Thank you!

    I’ve been using wordpress since 2008 and this is the kind of optimisation that I always have problems with – I wish I just had an auto serve the correctly scaled images plugin. dealing with responsive and so many screen sizes is so much of a headache.

Leave a Reply

Your email address will not be published. Required fields are marked *