One common alert which most people see while running their site on PageSpeed Insight or any similar website performance testing tool is to “Properly size images”. In this article, we are going to know all about this alert and how we can solve this error on our WordPress website.
What are “Properly size images”?
Now the first thing you wanna know about this alert is what does it actually mean? And why do these performance testing tools show these errors? The reason for this alert is because these tools have found some images on your webpage that are not properly sized and they are wasting user data as well as increasing page load time.
For example: on your webpage, you have an image, and that image’s size on the page is 100 x 100 pixels but the actual size of that image is 500 x 500 pixels, and the image gets downloaded from a server in 500 x 500 pixels and then get resized to 100 x 100 pixels to show on your webpage.
Similarly, a lower resolution image is also bad if your page needs a 100 x 100 pixels image and your actual image is 50 x 50 pixels it may load faster but it will look very blurry and users won’t gonna like it. A properly sized image is an image size that is equal to what a webpage image requires not more not less.
How to Find Oversized Images?
Now the question is which images are oversized and what size they should be? Finding the images is easy when you test your website on the site performance testing tool along with alert they also specifically list which images are not properly optimized or not properly size images.
You can check the render size of any image in chrome itself using the chrome dev tool. Just load your webpage which you wanna check and press Ctrl + Shift + I and inspection mode open in your browser.
Now press Ctrl + Shift + C to go into selection mode and select the image you want to check (tip: you can only check the images you are getting alert for).
After clicking it that image URL along with its sibling tags get highlighted in the Elements tab. Now when you hover over the image URL in the element tab you’ll see the actual size of the image and the rendering size of the image.
Plugins to Serve Scaled Images
Since we are using an amazing website building tool WordPress we can easily serve scaled images with minimal efforts using some good plugins. Below we have shared three great plugins that can help you serve properly size images on your WordPress website.
1. Smush
The first plugin we are going to know about is Smush. Smush is a great all-in-one WordPress plugin for image optimization. This plugin is a very popular and highly used plugin, it has over one million active installations and a whopping 5-star rating on the WordPress plugin store.
This plugin can automatically detect incorrectly sized images and optimize them based on webpage requirements. This plugin can also compress images for faster load time without even reducing the quality of the image. This plugin also offers lazy load for even faster performance.
Another great thing about this plugin is the ability to bulk resize images, it can resize up to 50 images at once which saves a lot of time. After resizing and compressing the images it stored them in your Media Library.
This plugin is free to use but it also offers a premium version for some premium features. The premium version of this plugin costs $5/per month, it also offers 7 days trial so you can try it before making a purchase decision.
2. Optimole
Another good plugin for image resizing is Optimole, surely it is not a very popular plugin but it has very powerful features and an easy setup process. It has over 80,000 active installations and more than 350 users have rated 5-stars for this plugin.
This plugin can resize and compress your images and serve properly size images to your visitors based on their browser requirements. This plugin works fully automatically and you just need to enable it and you are good to go.
Optimole does not resize images but rather takes a very advanced approach. It replaces all your images URL to the cloud-based URL and serves images to your visitors based on their device requirements so it always loads faster and better on every device.
This plugin also has a very different pricing method. All the features of this plugin are free for everyone but only till five thousand visitors per month after that you need to buy a premium plan. The premium plan costs $9/per month.
3. ShortPixel
Another great image optimization plugin is ShortPixel. This plugin is also fairly popular among WordPress users for image optimization. It can help you properly size images. It has over 300,000 active installations and a 4.5 stars rating on the WordPress plugin store.
A great feature of this plugin is it can help you automatically scale images as you upload them into your Media Library to the dimensions that you have already specified.
This plugin also offers some great image compression methods to and it also supports next-gen image formats which can really help you boost your image load time on your web page.
This plugin is also very affordable too it offers credits per month and every single credit is equivalent to one image and you can get 10,000 image credits just for $9.99. It also offers a free option for non-profit organizations.
Serve Scaled Images Without Plugin
Using a plugin to serve properly size images is a good option but everyone doesn’t want to use too many plugins on their WordPress website so we are also going to take a look at how we can serve scaled images without a plugin.
But before we know manually resizing images we should know about a native feature that comes with WordPress called srcset. This feature automatically makes three different sizes of a single image and gives the browser the option to choose between those three images.
And the browser will automatically choose the best version and smallest required version of the image for faster loading it.
Another thing to note is that no matter how hard you try you can’t resize the image for every screen size so keep your image size to the equal size of your website max div width.
For example, your blog section div size is maxed at 1500 pixels your image size should be 1500 pixels, not more than and not less than it either or the image might look blurry.
1. Crop Images in Media Library
WordPress media library offers an edit option for images and you can use that editing option to crop your webpage images.
To edit images head over to your webpage and click on edit, select the image you wanna edit, and click on the small pencil button to edit images in the media library. Now crop the image in the desired size and save it. Repeat this step for every single image on your webpage.
2. Adjust Media Settings
Another thing which you do is adjust the media settings of your WordPress website. To do that go to your WordPress dashboard and navigate to Settings>Media.
Modify max image size there for your images there so when you upload an image in the media library WordPress will automatically resize images for you when you upload them.
For better support WordPress stores images in three different formats, one is a thumbnail which is the smallest, the second is Medium size and the third is Large size which is the full size of the image. WordPress delivery best requires size images based on the user’s device requirements.
3. Use an Image Editor
One obvious solution but still mentioning use image editors to crop your images, there are tons of tools available for free and for paid for compressing and cropping images, and since you probably use custom images and make them in some toll just export them in the correct size.
If you are downloading images from some stock image websites most of them offer image dimensions choose the right one based on site requirements, not the highest resolution ones.
4. Use SVG if Possible
Using an SVG image for everything is not possible but at least for your logo and for images that can be used as SVG, you should always opt for SVG since they resize infinitely without increasing their size. So SVG images are always properly size images.
Use Explicit Height and Width on Images
Another very important aspect of image resizing is to use Explicit height and width on your image elements. Properly sized images should also have explicitly defined height and width attributes for better execution and for avoiding any unintentional layout shift.
Adding an explicit height and width is very easy, usually WordPress automatically sets this when we upload images on our media library. But if you wanna change it manually you can do it by following these steps:
- Just click on the image in edit mode.
- Now click on the little pencil icon to edit the image
- Now you can set height and width for your image.
- You can also use the little side handles to resize the image by dragging it.
What does this do?
Now if you are wondering what this explicit height and width definition does in your website HTML code so it basically adds a height and width property into it. As shown below:
<img src="image.jpg" alt="Image" width="640" height="360" />
Few Tips
There are few key things to keep in mind while resizing your images. Most of them are obvious but we are still gonna mention them.
- Check every single page of your website, performance testing tool only check a single page so you need to check every page one by one.
- Check for both desktop and mobile.
- Always backup your site before making any big changes like these.
- Always test more than once and possibly more devices.
- Don’t try to score 100 it’s next to impossible.
Conclusion
Now we are wrapping up and we have talked all about properly size image alert, what they are and how you can fix them for your website. After following this tutorial you will surely see a performance boost in your website speed and this alert from PageSpeed insight should have gone.
Since you are reading this article to make your WordPress website faster I will highly recommend you to check out our articles on WordPress PageSpeed we have tried to include every possible option for boosting website performance and get a better rank on PageSpeed.
