How to Fix The "Properly Size Images" Warning in WordPress

Images are tricky. Every website needs them, whether for product pages or blog posts, but they're easy to do wrong.

In particular, images can get very, very large. A typical smartphone can take pictures that are frankly immense, especially when you consider that only 10-20 years ago, an image the size of a postage stamp would take several minutes to download.

Easy access to large images, easy viewing on large computer screens, and easy access to high-speed internet for many of us mean that we might not think of pictures as having nearly the impact they do.

But then you drive out to a rural area and try to use your smartphone via LTE service to browse a website, and you watch images time out when loading, see websites devoid of content because the pictures didn't load in, and you realize.

"Oh, that's why Google cares!"

Over 50% of modern web browsing is handled on mobile devices. And while high-speed internet is swiftly growing in availability, it's still not everywhere. Did you know that nearly 25% of households don't even have internet access or that millions still use dial-up service?

Image credit: Reviews.org

Remember, the internet isn't just for the people with access to gigabit fiber in the heart of Silicon Valley. The internet is for everyone, which means people using slow, spotty connections, people browsing via satellite internet, etc.

What does all of this have to do with images?

Now consider how large a picture is. A single photo can be several times larger than an entire webpage, and a webpage can have many pictures on it. It's no wonder that images can slow down websites by multiple orders of magnitude.

This phenomenon is where Google's policies come in. Google has set "fast-loading pages" and several load-time metrics in the Core Web Vitals as crucial search ranking factors. The slower a page is to load, the more it will affect your search ranking. If someone is trying to visit your site with one or two bars of cell phone service, they should still be able to see your site without waiting 30 seconds to start seeing movement.

To facilitate optimizing this, Google provides a tool called PageSpeed Insights. PageSpeed Insights scans your website and determines how quickly it loads, both for mobile and desktop versions. They audit your site for dozens of potential issues and deliver you a report with any problems they detect. One of the more common issues is the "Properly Size Images" error.

This tutorial will help you solve this issue once and for all. Let's get started!

What Does "Properly Size Images" Mean?

If you're getting the warning about "Properly Size Images" in PageSpeed Insights, you probably want to know what it is and how you can solve it. After all, if you're aiming to hit over 90 on your PSI Score, you need to address as many problems in their reading as possible.

This issue isn't tanking your SEO, and fixing it isn't going to skyrocket you to the #1 position. Resolving it will help improve your page load times and Core Web Vitals, but it's not going to have a massive, dramatic effect - it's one ranking factor out of hundreds.

So, what is the problem?

When you upload an image in WordPress, the platform will automatically generate several different-sized versions of the image for use, which you can then specify in the image blog you add to your site. This feature allows you to choose a large, medium, small, or thumbnail version of the image to display.

Any other resizing on the site – for example, when your site is scrunched down with a responsive design on a mobile device – WordPress can take advantage of plugins or custom code to serve those lean thumbnail versions instead.

That means you might have an image with dimensions like 1440x1080, with code scrunching it to display at 370x278 on a mobile device. That's a huge difference! That extra size is unnecessary on small screens, but it means your original image files are huge. The functionality to create multiple thumbnails is a core WordPress feature, but WordPress doesn't swap them depending on your device, and you're forced to pick a single size when inserting an image - more on that in a bit.

More importantly, many modern website designs have a sizeable above-the-fold image to accompany the title and introduction of a post. That huge image looks excellent on a desktop, but it has to load front and center, which takes time. It hurts your first and largest contentful paint scores on mobile, can cause cumulative layout shift, and generally wreck your mobile core web vitals.

One of my test sites scores 98 on the desktop PageSpeed Insights but a meager 76 on mobile, and it's almost entirely because those above-the-fold images aren't optimized for mobile viewing. It's an incredible difference!

For a technical brief: when Google scans your site on mobile for PageSpeed Insights, they do it by simulating a 4G cell network with poor service and using a Moto G4 (or an emulated version thereof), so it's using outdated "hardware."

But, since millions of people across the country still use old hardware, it's a realistic simulation of what someone in a middle-of-the-road situation might be using.

Unfortunately, there's no straightforward check-box that you can click to fix this in WordPress. Most WordPress themes are designed to facilitate image scaling and don't believe that scaling is inherently wrong. On the other hand, Google prefers if the images are as close to their display size as possible. Why bother loading a photo that's 3,000 pixels wide on a screen that is only 1,170 pixels wide? Your users just waited three times longer than they needed to, and search engines can see this.

Four Possible Solutions

While researching (and fixing) the WordPress Properly Size Images error, I've discovered several possible solutions.

1. Solution one is to ignore it for now and fix more critical issues first. If you can take care of other essential issues in PageSpeed Insights, you can often reach over 90 in the tool without fixing the problem. In fact, on that test site I mentioned, the desktop version with a 98 score has the error, while the mobile version with 76 does not. Wild!

Is ignoring it a good idea? Probably not. Mostly, it comes down to two things: how much time you have to tinker and what other possible problems you could be solving instead.

I'd much rather tinker and get that 76 up to above 90 than I would get the 98 to 99 in Google PageSpeed Insights.

2. Solution two is to do a bunch of manual image resizing and image compression. You can do this with apps like Imagify, Shortpixel, or Smush; I wrote about many different options here, so give this a read if you want to resize images in bulk. One note: this option may require you to go through and replace all of your featured images and any other new images that are causing problems. However, most of these tools will proactively resize every new picture you upload to your site moving forward.

3. Solution three uses plugins to automatically swap your smaller-sized images to the thumbnail version WordPress generates, for example. This solution can have the issue of overshooting and using too-small pictures in some instances, but that's often better than using too-large images, which may work in your favor. You can also use plugins to lazy-load your images, which is a practice that hides images that are out of view of the user.

Lazy-loaded images only start loading when they come into view. If you have a page with a lot of images, they may all be trying to load at once when you really only need the images above the fold to load first.

4. Solution four is to wade deep into the weeds of your WordPress theme, identify multiple different breakpoints, and specify source images for each with CSS media queries. This option is overkill; it will virtually guarantee the best possible results for anyone on any mobile device, but Google tends to use one simulated mobile device for PageSpeed Insights (and, presumably, their index.) This solution is best for sites that don't have a blog or that only have a small handful of internal pages. This isn't a realistic option if you have hundreds or thousands of pages.

Why would you want to do this, then? It depends on your goal. If you want the best possible user experience for every mobile user, this option will help you achieve that goal. On the other hand, if you want the best SEO metrics according to Google, the added work (and benefit) won't impact your ranking. It's up to you what you want to do.

Since solution one is to ignore the problem and solution two is both tedious and has been covered elsewhere, I will focus the rest of this post on solutions three and four.

Using Plugins to Solve Properly Size Images Errors

If we're being honest, this option is the one 90% of you are going to use. It's fast and relatively easy, and it caters specifically to what Google is looking for. If Google changes how they measure mobile page responsiveness, your images might need tweaking, but this should work fine until that point.

The first plugin you want to use is Mobile Featured Image, which you can find on this GitHub page. How does it work?

The plugin adds a new line to the list of sizes WordPress uses and gives you the added option for a "mobile featured image" beneath the standard "featured image" box in a post you create. If you let it do its thing, it will automatically replace all mobile featured images with the thumbnail version of your featured image.

However, if you want, you can also specify the exact image that shows up on mobile, including making it a different and unique graphic. I wouldn't recommend making it unique – Google likes the different resolutions of a site to be the same – but it's an option if you want to use it.

If the above plugin doesn't solve the issue for you, you can try something like Just Responsive Images.

The other part of this process is optimizing the rest of the images on your site. By lazy loading the below-the-fold images, you speed up page load times significantly. I love WP Rocket for this; they have the feature built into their core plugin, a paid plugin, or you can use the free lazy loading spinoff here. For example, if you use the "Mobile Featured Image" plugin, exclude that from lazy loading, and then lazy load the rest, PageSpeed Insights will only see your featured image, which is already mobile-optimized.

As you can tell, there is more than one solution to this problem. Plugins make life a lot easier sometimes.

Manually Editing WordPress to Solve Properly Size Images Errors

The second option is to manually find "breakpoints" in screen sizing, where your responsive design adjusts for different mobile viewports.

I recommend using Responsive Image Linter to audit your images. This script is a bookmarklet; that is, a piece of code that runs when you copy it into your address bar. All you need to do is bookmark the link on the page, and then when you're on your website, activate the bookmark. It will run a script, audit your page, and generate a report of all of your images at various screen sizes. The code will tell you which images have issues, at what dimensions, and how to fix them.

Once you have this report, you'll have to figure out what image dimensions and sizes you'll need to optimize for. You'll need to generate those images and upload them to your hosting, and regenerate thumbnails for them. Then, you need to register more image sizes in your add_image_size() function and serve images properly for various viewport sizes.

You can read more documentation on this process on this page. Remember that this will be a pretty large project with a lot of time spent executing scripts if your WordPress site has more than a few dozen pages on it, so budget your time accordingly.

If this option is too technical for you, don't worry about it. The previous WordPress plugin-based option will get you close enough - this is just for my fellow webmasters who want to weigh every possible option.

Extra Credit for Image Optimization

If you've managed to remove the "Properly Size Images" warning, there are a few things you can do to improve your score further and get above a 90 on Google PageSpeed.

For example:

• Implement a CDN. This will improve your FCP (first contentful paint) time and LCP (largest contentful paint) time. If a content delivery network can deliver an image to a user faster than your web host can, that means your site will appear to load faster, which will improve your scores across the board. Images tend to be some of the heaviest elements on a website, so hosting them on a hyper-fast server is wise. The bandwidth is also dirt cheap; our KeyCDN service costs us a few dollars per month.
• Change your image formats. Avoid PNGs, and stick primarily to JPGs. If you decide to use a paid image optimization plugin like Imagify, it not only optimizes your images, but it converts images to .webp format. Using the .webp image format will get rid of the "Serve Images In Next-Gen Formats" warning. Imagify will also help you compress images and resize your full-size images if they are too large, which helps you get rid of the "Properly Size Images" warning. It will still back up your high-resolution images, as well as the original image formats, so don't worry about losing your original files.
• Define your images in your HTML. Set a specific height and width dimension, and check your WordPress theme CSS files to ensure they are being scaled properly at every resolution. You also want to make sure images have a "max-width" defined so that they aren't overflowing off of the screen. Without a specific height and width, your images will trigger a warning in Google Lighthouse and PageSpeed insights: "Image elements do not have explicit width and height."
• Only load retina images on retina screens. You can check for retina screens with the following CSS media query:
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
• Lazy load images. Image lazy loading will prevent off-screen images from loading until the user scrolls to them. If your higher-resolution images are further down the page, this could solve your problem right away. It will also resolve the "Defer offscreen images" error.

These options should help you solve most potential issues with images not loading in the correct dimensions. After implementing a fix, you have to pay attention to the other Core Web Vitals and ensure they're all sorted out.

Depending on the size of your site and the amount of real-world data that Google can harvest, it can sometimes take months or even years for Core Web Vitals to update in Search Console, so keep running tests and do your best to get your site to a passing grade.

Were you able to get this error resolved, and if not, which method(s) did you use to attempt to fix them? Please share with me in the comments below, and I'll reply quickly with tips to help! I've helped hundreds of sites achieve 90+ PageSpeed scores, and I'd be happy to point you in the right direction. The more tips that we can share, the faster we can make the internet.