Ensure images do not slow downloads Usability Guideline

Description

Omitting img width or height attributes makes the page layout jump about as images load.

Help

This makes the page very hard to read or click while it’s loading. Fix by adding width and height attributes to the img tag matching the image dimensions. 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

Note: The guidelines.usability.gov website has been down since July 2020, although www.usability.gov is still operating and the PDF version of the guidelines is still available.

Change history

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.
3.0 Dec 2008 Added.

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

Rule ID: UseGov14.3