HTML Checking for Large Sites

The srcset property on img elements, when used, requires at least one value. This property is a string which identifies one or more image candidate strings, separated using commas (,) each specifying image resources to use under given circumstances.

Each image candidate string contains an image URL and an optional width or pixel density descriptor that indicates the conditions under which that candidate should be used instead of the image specified by the src property.

Example:

<img
    src="/img/cat-200px.png"
    alt="Cat"
    srcset="
      /img/cat-200px.png 1x,
      /img/cat-400px.png 2x
    ">

The attributes width and height on <img> elements define the dimensions of the image in CSS pixels, and expect a non-negative integer.

<img> elements accept a width attribute to specify the size in pixels. This value can only be an integer, it should not contain units or %. If you need to specify a percentage width, you can do that with CSS:

<img src="photo.jpg" alt="red car" style="width:100%;">

The width and height attributes on <img> and <iframe> elements expect a digit to indicate the number of pixels. Ensure that this attribute contains only digits.

For example:

<!-- This is invalid because width is not a digit -->
<img width="225px" height="100px" alt="cat" src="cat.jpg" />

<!-- This is valid -->
<img width="225" height="100" alt="cat" src="cat.jpg" />

<img> tags used to display images require the attribute src to indicate the source of the image, for example <img src="/img/photo.jpg" />.

<img> tags no longer accept a border attribute. This can be defined using CSS instead, for example:

<img src="..." alt="..." style="border:0;" />

A single <img> element is used to embed an image, so adding the img role to it is redundant.

The ARIA img role can be used to identify multiple elements inside page content that should be considered as a single image. These elements could be images, code snippets, text, emojis, or other content that can be combined to deliver information in a visual manner, for example:

<div role="img" aria-label="Description of the overall image">
  <img src="graphic1.png" alt="">
  <img src="graphic2.png">
</div>

The deprecated property longdesc on img elements was used in HTML4 to specify the URL of a text or HTML file which contained a long-form description of the image. This could be used to provide optional added details beyond the short description provided in the title or alt attributes.

Here’s an example from HTML4:

<img
  src="cat.jpg"
  alt="Smiling Cat"
  longdesc="image-descriptions/smiling-cat.html" />

This, however, is no longer valid in HTML5 and can be converted to the following instead:

<a href="image-descriptions/smiling-cat.html">
  <img src="cat.jpg" alt="Smiling Cat" />
</a>

Check the HTMLImageElement.srcset guide to learn about the correct usage of the srcset and sizes attributes.