Images account for more than 60% of the bytes on average needed to load a web page. You need to pay special attention to this when working with your site.
What does “Mismatches in size images on a site” mean?
This means that the page contains images that are larger than the size they are displayed at. Why? On different smartphones and tablets, images can render at different sizes, depending on the viewport size. And the browser wastes time resizing the images down to fit. Moreover, users should download useless data, which increases the duration of loading.
You can read more about using images on your websites:
What triggers this issue?
You have a site that works well on the web, and there you have no problem with image sizes. But things can be completely different in the mobile version of your project since you did not foresee this question in the HTML document of the pages. Then the images cannot adapt to different screen sizes of portable devices. And you have a “Mismatches in size images on a site” issue.
How to check the issue?
You need to crawl the site using a special desktop or online tools. For example, the Lighthouse app can collect all the images on a page and then compare the size of the rendered image to the size of the actual picture. You get a warning that the image fails validation if the rendered size is at least 4KiB smaller than the actual size. Next, you need to check the other pages on your site.
Analyze not only Properly sized images question but the entire site!
Make a full audit to find out and fix your technical SEO in order to improve your SERP results.
Why is this important?
Users value speed and want to work with pages that load quickly. Therefore, you need to keep track of the correspondence between the rendered size and the actual size of the images on your site.
How to fix the issue?
We have prepared several best tips for properly sizing images on your site (for WordPress or other CMS users):
- Manual resizing of images
- Using an image CDN
- Formatting. You can replace raster images with vectors (no pixels = smaller size of more optimal formats)
- Using a theme that incorporates srcset functionality
- Using an image optimization plugin
- Using a React image file resizer
- Following web image size standards
- Optimization images with desktop or online tools (If you have an online store in Shopify, you can use Crush.pics or Minifier)
- Using srcset to easily implement and automate the use of responsive images in your domain. You generate many versions of each picture and then specify which version to use in your HTML or CSS using media queries, viewport dimensions
These tips help to save data and improve page load time.
You can also watch a video by Pete LePage from Google Developers about using secret for responsive images.
