The warning from Google to properly size images is a very common one that comes up these days. This happens if an image being served by the browser is bigger than its container. Below we’ll dive into a few tips on how you can fix this.
Serve images that are appropriately-sized to save cellular data and improve load time.
Upload images directly through the media library to ensure that the required image sizes are available, and then insert them from the media library or use the image widget to ensure the optimal image sizes are used (including those for the responsive breakpoints). Avoid using full-size images unless the dimensions are adequate for their usage.
WordPress supports responsive images with srcset out of the box. However, themes and plugins like WooCommerce might want a different sized image then you already have defined in WordPress.
For example, perhaps you have an archive page with containers expecting images that are 250 px by 250 px. But the images you have uploaded in your media library are 500 px by 500 px.
There are a couple ways you can try to fix this.
- Option 1 – Regenerate thumbnails
- Option 2 – Force smaller images on smaller screens
- Option 3 – Use a plugin
Option 1 – Regenerate thumbnails
First, you should check your media settings in WordPress or your image folder to see what dimensions are currently being generated for your images. If there isn’t one with proper dimensions, you might need to register a new image size.
If your media settings are OK, it could be that perhaps you changed WordPress themes or plugins at some point and the dimensions of your thumbnails need to be updated. This means you probably need to regenerate your thumbnails.
We recommend trying one of these free plugins:
Make sure you also take a backup of your WordPress site (which includes your media library) before using the plugins.
Option 2 – Force smaller images on smaller screens
The other option is to add a snippet of code to your site to force smaller images to load on smaller screens. Check out this example from David in this GeneratePress thread regarding the properly size images warning.
If you’re having issues with this, we recommend reaching out to your theme developer and asking for help. They should be able to provide more specific instructions regarding getting the dimensions of your images to the right size.
Option 3 – Use a plugin
You can also utilize a plugin and service like ShortPixel Adaptive Images. Perfectly sized images are created for any device your visitors use (mobile, tablet, desktop).
Additional tips
- Always try to upload images with the original size being the biggest to be displayed on the site. For example, if your site’s width or content div is 1,500 px, don’t upload an image that is 3,000 px. Upload a 1,500 px wide image and WordPress image thumbnail resizing, and your theme should take care of the rest.
- For logos and web font icons, try to use SVGs (vector-based images). SVGs scale infinitely, and you don’t have to worry about different sizes.
- DebugBear has an excellent, in-depth article about responsive images worth reading.