So you’ve run Google PageSpeed test for your website and got ugly notice like this:
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.
- 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.
- 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.
- 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.
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.