HTML5 <img> Tag

The HTML <img> element is used to represent an image in the document.

No other content is permitted inside the <img> tag as it is a void element. The start tag is mandatory for this element but there must be no closing tag. The parent of the <img> tag can be any element that accepts embedded content.

Browsers do not always display the image referenced by the element. A few situations where it might happen — in case of non-graphical browsers (including those used by people with vision impairments), when the user chooses not to display images, or if the image because it is invalid or an unsupported type. In these cases, the browser may replace the image with the text defined in this element’s alt attribute. For this and many other reasons, you should provide a useful value for alt whenever possible.

Regarding CSS, <img> is a replaced element. It has no baseline, so when images are used in an inline formatting context with vertical-align: baseline, the bottom of the image will be placed on the container’s baseline.

The following style is applied to this element by default:

img {
  display: inline-block;
}

Here is an example of using this tag:

<img src="path/to/image.jpg" alt="Leaves">

<a href="link/to/some/page.html">
  <img src="path/to/image.jpg" alt="Leaves">
</a>

<img src="path/to/leaves-200.png" 
  alt="Leaves" 
  srcset="path/to/leaves-200.png 200w,
      path/to/leaves-400.png 400w"
  sizes="(min-width: 600px) 200px, 50vw">

Attributes

alt

This attribute is used to define the alternative text describing the image. Users will see this text displayed if the image URL is wrong, the image is not in one of the supported formats, or if the image is not yet downloaded.

Omitting this attribute altogether indicates that the image is a key part of the content, and no textual equivalent is available. Setting this attribute to an empty string (alt=”“) indicates that this image is not a key part of the content, and that non-visual browsers may omit it from rendering.

crossorigin (HTML5)

This enumerated attribute is used to indicate if the fetching of the related image must be done using CORS or not. CORS-enabled images can be reused in the <canvas> element without being “tainted.” The allowed values are:

  • anonymous: A cross-origin request (i.e., with Origin: HTTP header) is performed. But no credential is sent (i.e., no cookie, no X.509 certificate, and no HTTP Basic authentication is sent). If the server does not give credentials to the origin site (by not setting the Access-Control-Allow-Origin: HTTP header), the image will be tainted and its usage restricted.
  • use-credentials: A cross-origin request (i.e., with Origin: HTTP header) performed with credential is sent (i.e., a cookie, a certificate, and HTTP Basic authentication is performed). If the server does not give credentials to the origin site (through Access-Control-Allow-Credentials: HTTP header), the image will be tainted and its usage restricted.

When not present, the resource is fetched without a CORS request (i.e., without sending the Origin: HTTP header), preventing its non-tainted usage in elements. If invalid, it is handled as if the enumerated keyword anonymous was used. See CORS settings attributes for additional information.

height

The intrinsic height of the image in pixels. In HTML 4, the height could be defined pixels or as a percentage. In HTML5, however, the value must be in pixels.

ismap

This Boolean attribute is used to indicate that the image is part of a server-side map. If such cases, the precise coordinates of a click are sent to the server. This attribute is allowed only if the <img> element is a descendant of an <a> element with a valid href attribute.

sizes (HTML5)

This attribute is used to provide a list of one or more strings separated by commas indicating a set of source sizes. Each source size consists of:

  • a media condition: This must be omitted for the last item.
  • a source size value.

Source size values specify the intended display size of the image. User agents use the current source size to select one of the sources supplied by the srcset attribute, when those sources are described using width (‘w’) descriptors. The selected source size affects the intrinsic size of the image (the image’s display size if no CSS styling is applied). If the srcset attribute is absent, or contains no values with a width (w) descriptor, then the sizes attribute has no effect.

src

The attribute is used to provide the image URL. It is mandatory for the <img> element. On browsers supporting srcset, src is treated like a candidate image with a pixel density descriptor 1x unless an image with this pixel density descriptor is already defined in srcset, or unless srcset contains ‘w’ descriptors.

srcset (HTML5)

This attribute provide a list of one or more strings separated by commas indicating a set of possible image sources for the user agent to use. Each string is composed of:

  • a URL to an image,
  • optionally, whitespace followed by one of:
    • a width descriptor, or a positive integer directly followed by ‘w’. The width descriptor is divided by the source size given in the sizes attribute to calculate the effective pixel density.
    • a pixel density descriptor, which is a positive floating point number directly followed by ‘x’.

If no descriptor is specified, the source is assigned the default descriptor: 1x. It is incorrect to mix width descriptors and pixel density descriptors in the same srcset attribute. Duplicate descriptors (for instance, two sources in the same srcset which are both described with ‘2x’) are invalid, too.

The user agent selects any one of the available sources at its discretion. This provides them with significant leeway to tailor their selection based on things like user preferences or bandwidth conditions.

width

The intrinsic width of the image in pixels. In HTML 4, either a percentage or pixels were acceptable values. In HTML5, however, only pixels are acceptable.

usemap

The partial URL (starting with ‘#’) of an image map associated with the element. You cannot use this attribute if the <img> element is a descendant of an <a> or <button> element.

Examples

See the Pen HTML image Tag by Tutorialio (@tutorialio) on CodePen.

Further Reading

  1. Read more about the HTML <img> element on MDN.
  2. You can also read the HTML <img> tag reference on W3C.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top