Get rid of “Displays images with incorrect aspect ratio”

In this tutorial we are going to discuss the simple but crucial issue that web masters, and SEO people come across while working with images on a web page.

The issue raises when a web developer, SEO guy checks page performance at Lighthouse, here, https://pagespeed.web.dev/ one might see an error causing low scores for the page SEO, with flag, “Displays images with incorrect aspect ratio.”

Now the answer to the question on “How to get rid of this red flag raised by Lighthouse page test”, here:

Set the actual size of image on your page in the <img> tag of HTML, here's an example, we are using a image with dimensions, width="640" and height="853" so what page speed test wants you to apply is that you give the exact dimensions of your image to the width and height properties of img tag. <amp-img data-hero src="img.webp" alt="img" layout="responsive" width="640" height="853" srcset="img.webp 640w" class="img" > </amp-img>

This would surely get rid of the issue raised with Lighthouse page test, as far as image incorrect aspect ratio is concerned.

Few best practice we use in our code are, using amp service, for displaying images.

Use improved stylesheet with width 100% and keep height auto, and if this does not work we apply fixed sizes for width and height is usually left auto.

Here's one pro+ tip for beginners and web masters out there, we give images slight curved edges with border-radius; this is simple but elegant stylesheet element for us. Thanks for reading hope this helps, if you got queries, feel we've made mistakes, or have more correct answer to this issue kindly create your HilalSocial profile and DM us right away, or post at our platform. We will include your post or DM to this page.