HTML Guide for img

The src attribute on an <img> tag is not allowed to contain space characters. You should replace them with “%20“.

To fix the issue of having a bad value for the src attribute on an img element due to having a tab, new line, or carriage return, you need to ensure that the src attribute does not contain any additional whitespace characters like tab, new line, or carriage return.

Incorrect code:

<img src="images/example.jpg
" alt="Example Image">

Corrected code:

<img src="images/example.jpg" alt="Example Image">

By removing the extra whitespace characters (new line in this case) and ensuring that the src attribute value is properly enclosed within quotes, the issue should be resolved.

All values in the srcset attribute must include a width descriptor (such as 300w) when the sizes attribute is present.

The srcset attribute is used to provide multiple image sources for responsive images. Each image candidate string in srcset must specify the image’s width (e.g., 600w) or pixel density (e.g., 2x). When you use a sizes attribute, all srcset candidates must use width descriptors (w).

Example of incorrect usage:

<img
  src="/img/pic1.jpg"
  srcset="/img/pic1.jpg"
  sizes="(max-width: 600px) 100vw, 600px"
  alt=""
>

This example is invalid because the srcset value does not include a width descriptor.

Corrected usage with width descriptors:

<img
  src="/img/pic1.jpg"
  srcset="/img/pic1.jpg 600w"
  sizes="(max-width: 600px) 100vw, 600px"
  alt=""
>

If you have multiple image sizes, include each with its corresponding width:

<img
  src="/img/pic1.jpg"
  srcset="
    /img/pic1_small.jpg 300w,
    /img/pic1.jpg 600w
  "
  sizes="(max-width: 600px) 100vw, 600px"
  alt=""
>

Always match each image URL in srcset with a width (w) or pixel density (x) descriptor if appropriate for your layout.

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 srcset attribute requires a width descriptor (w) or pixel density descriptor (x) for each image candidate when the sizes attribute is present.

When using the sizes attribute on an img element, each entry in srcset must include either a width descriptor (e.g., 860w) or a pixel density descriptor (e.g., 2x). This tells browsers how to select the most appropriate image source for the current viewport or display density. Omitting the descriptor leads to HTML validation errors and unexpected image selection.

Correct usage with width descriptors:

<img
  alt=""
  sizes="(min-width:568px) 140px"
  srcset="photo.png?w=860&amp;q=90 860w"
  src="photo.png?w=860&amp;q=90">

Correct usage with pixel density descriptors (if sizes is removed):

<img
  alt=""
  srcset="photo.png?w=860&amp;q=90 2x"
  src="photo.png?w=860&amp;q=90">

Key points:

• With sizes, use width descriptors (e.g., 860w).
• Without sizes, you may use pixel density descriptors (e.g., 2x).
• Always use either px or w units in the sizes attribute values; do not use w.

The attributes width and height on an iframe expect a valid positive integer without any decimals.

Here’s an example of incorrect code where decimals are being used for dimension attributes:

<img src="photo.jpg" alt="Dog" height="602.88" width="800.2">

Corrected code without decimals:

<img src="photo.jpg" alt="Dog" height="603" width="800">

In the corrected code, the width and height values has been changed to a whole number, which conforms to the standard integer value expected by the W3C validator.

<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" />.

The picture element is used to provide multiple sources for an image depending on the viewport size or resolution of the device being used. It’s a container element that requires exactly one img child element, and zero or more source child elements inside.

The browser will consider each child <source> element and choose the best match among them. If no matches are found –or the browser doesn’t support the <picture> element– the URL of the <img> element’s src attribute is selected. The selected image is then presented in the space occupied by the <img> element.

To fix this issue, add an img element inside the picture element with a src attribute pointing to the default image file that you want to display.

Here’s an example:

<picture>
  <source srcset="example-large.jpg" media="(min-width: 800px)">
  <source srcset="example-medium.jpg" media="(min-width: 450px)">
  <img src="example-small.jpg" alt="Example">
</picture>

In this example, we’ve added a default image img with the src attribute set to “example-small.jpg”. If none of the source elements match the device’s viewport size or resolution, this image will be displayed.

An img tag placed inside an SVG or MathML element creates a namespace error because img is an HTML element, not an SVG or MathML element.

SVG and MathML use their own XML-based namespaces, and HTML elements like img cannot be directly inserted inside them. To include raster images within SVG, the SVG image element should be used instead, and external math images must be handled outside MathML.

Explanation:

• The HTML img element is only allowed in the HTML namespace.
• Placing <img> inside an <svg> or <math> tag triggers a namespace conflict, as img is not a valid child of these elements.
• The SVG standard provides the <image> element for embedding bitmap images within SVG.

Incorrect:

<svg width="100" height="100">
  <img src="picture.png" alt="Example" width="100" height="100">
</svg>

Correct:

<svg width="100" height="100">
  <image href="picture.png" x="0" y="0" width="100" height="100" />
</svg>

Use the SVG image element instead of HTML img whenever embedding images inside SVG.

<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>

The warning regarding the use of the name attribute on the img element arises because the name attribute is considered obsolete in modern HTML. Historically, name was used to identify form controls and some other elements, but now it’s replaced by more standardized attributes like id.

To resolve this issue, replace the name attribute with the id attribute. The id attribute provides a unique identifier for the element within the document, which can be utilized for styling, scripting, or linking using fragment identifiers.

Here is an example of how to make this change:

HTML with obsolete name attribute:

<img src="example.jpg" name="myImage" alt="Descriptive text">

Updated HTML using the id attribute:

<img src="example.jpg" id="myImage" alt="Descriptive text">

In this modification:

• The name="myImage" is replaced with id="myImage".
• The remaining attributes like src and alt are retained for specifying the image source and providing alternative text, respectively.

The id attribute should be unique within the document, which ensures that JavaScript or CSS can target the element efficiently.