seo site checkup logo
PricingFree ToolsArticles

Image Aspect Ratio Test

What is it?

This test will check if all images are displayed with a correct aspect ratio. If a rendered image has an aspect ratio that's significantly different from the aspect ratio in its source file (the natural aspect ratio), the rendered image may look distorted, possibly creating an unpleasant user experience.

Pass rate:

  • Top 100 websites: 75%
  • All websites: 64%
Pass rates of Top 100 US websites
2021

72%

2022

68%

2023

75%

100

75

50

25

0

How do I fix it ?

There are two common causes for an incorrect image aspect ratio:

  • An image is set to explicit width and height values that differ from the source image's dimensions.
  • An image is set to a width and height as a percentage of a variably-sized container.

To help avoid these issues, consider using an image CDN, to help automate the process of creating different size versions of your image.

Also check any CSS that can affects the image's aspect ratio - if you're having trouble finding the CSS that's causing the incorrect aspect ratio, Chrome DevTools can show you the CSS declarations that affect a given image.

Finally, check the image's width and height attributes in the HTML. When possible, it's good practice to specify each image's width and height attributes in your HTML so that the browser can allocate space for the image. This approach helps to ensure that content below the image doesn't shift once the image is loaded.

Check your website's SEO for free right now!

seo site checkup logo
Website SEO, Monitoring & Automation Made Easy.
Product
  • Pricing
  • Free Tools
  • Articles
  • Login
  • Free 7-Day Trial
© SEO Site Checkup 2020-2024 • All rights reserved