Image Aspect Ratio

Why natural aspect ratio needs to match image display dimensions

Accessibility

Why natural aspect ratio needs to match image display dimensions

A rendered image may be distorted if it is presented with an aspect ratio that is obviously different from its natural aspect ratio (i.e. that of its source file). The user experience in this case is obviously negative.

 

How the SeoChecker image aspect ratio audit is displayed

If the rendered dimension of an image results differently (we talk about more than some pixels) from the expected dimension when rendered at its natural ratio, SeoChecker will notify it.



An incorrect image aspect ratio can be caused by:

  • an image set to a height and width as a percentage of a container of variable size;
  • an image set to explicit height and width values that are different from the dimensions of the original image.

 

How can I be sure the correct aspect ratio is set?

There are three ways:

  • in the HTML, verify the width and height attributes of the image
  • have a look at the CSS that influences the aspect ratio of the image 
  • use an image CDN

Share this Guide

Did you like it? Share it!

Share this tool

Web tools for modern developers. Try these one!

Over 50 generators, builders and validators to improve your SEO and web performances

Home Back to top of the page