Setting the width and height attributes on <img> tags helps prevent
layout shifts. This information
allows the browser to reserve the correct amount of space for the image.
Set the
widthandheightattributes: The values of these attributes should be set to match the dimensions of the image itself (that is, its intrinsic size) - rather than dimensions that the image will be displayed at.Adjust image styling as needed: Depending on the image's existing styling, adding
widthandheightattributes may cause the image to render differently. In many cases, this can be fixed by addingheight: autoorwidth: autoto the existing styling.
| Previous CSS styling | Change to |
|---|---|
| img { width: 100%; } | img { width: 100%; height: auto; } |
| img { max-width: 100%; } | img { max-width: 100% height: auto; } |
| img { height: 100%; } | img { height: 100%; width: auto } |
HTML
<img width="267" height="400" src="dog.jpg">