HTML Guide for img
The src attribute on an element <img> contains a character that is not allowed, and should be encoded.
Some typical examples include the pipe character | that should be replaced by its encoded alternative %7C , and the left square bracket [ that needs to be encoded as %5B.
The src attribute on an <img> tag is not allowed to contain space characters. You should replace them with “%20“.
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" />.
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.
<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>