Skip to main content
Tick PowerMapper
 Try it now

Ensure images do not cause layout shifts Usability Guideline

Description

Omitting image width or height causes the page layout to shift as each image loads.

Help

This makes the page very hard to read or click while images are loading, and can make the page unusable on mobile devices with slow connections. Fix by adding width and height attributes to the img tag matching the image dimensions, or add width: and height: CSS properties for the image. In responsive layouts, specifying width and height prevents layout jumping because the browser can pre-calculate the final image size when CSS like this is used: img { max-width: 100%; height: auto }

Applicable standards

Change history

  • 2026.60 Apr 2026 Don’t fire when CSS width: and height: specify image size.
  • 6.53 Jul 2024 Don’t fire for hidden elements.
  • 5.4 Feb 2014 Don’t fire on IMG elements with data: URLs.
  • 5.0 Oct 2012 Don’t fire on IMG elements with no SRC attribute.
  • 4.3 Apr 2011 Don’t fire on images with display:none.
  • 3.4 Sep 2009 Don’t fire on images with width and height set by CSS.
  • 1.0 Feb 2007 Added.

This page describes a web site issue detected in HTML documents by SortSite Desktop and OnDemand Suite.

Rule ID: UseImgWidthHeight