Provide image dimensions Usability

Images are loaded asynchronously and continue loading after the first paint. Unless the images have dimensions defined in HTML or CSS this causes repeated layout shifts (jank) as each image loads.

This ruins user experience on slow mobile connections - users often click on the wrong thing because the elements move around as they’re trying to click.

Images should also be displayed close to the natural aspect ratio of the image file to avoid the image appearing stretched or distorted.

References

• Aspect ratio - web.dev
• Preventing layout jank when loading images - MDN
• Images with incorrect aspect ratio - Lighthouse