HTML <Img> Tag

Definition

The <img> tag is used to embed an image on a web page.

Example

<img
  width="400"
  height="225"
  src="https://res.cloudinary.com/thewebmaster/image/upload/image/moon-earth.png"
  alt="Moon and Earth"
/>

Usage

• The <img> element request an opening tag but not a closing tag.
• The src attribute is required. The value should be a valid path to an image.
• The alt attribute is used for screen readers or as a text replacement should the image not load for any reason.
• To prevent reflow (where the contents of the page load, then move around after rendering to make room for the image), you should add the width and height attributes. This is important as Cumulative Layout Shift is now part of Google’s new Page Experience Algorithm.

Attributes

The <img> element supports the Global Attributes, as well as the following:

• alt

  The alt attribute specifies the alternative text to be used if the image is not displayed for any reason.

  Omitting the alt attribute indicates the image is a key part of the document, but no textual information is available. However, setting alt="" will indicate that it is not a key part of the document. This is useful for tracking pixels or other images that should not be included for screen readers. alt="" will also stop visual browsers from displaying a broken link if the image fails to load for any reason.

• crossorigin

The crossorigin attribute allows images from a third-party site (that allows CORS) to be used with <canvas>.

Values can include:

• anonymous

• use-credentials

• height

  The height attribute specifies the height of the <img> element in pixels.

• ismap

The ismap attribute is a boolean that specifies an image as a server-side map. This attribute is only permitted where the <img> element is a descendant of an <a> element with a href attribute.

• loading

  The loading attribute specifies how the browser should load the image. The browser must have JavaScript enabled for this to take effect.

  Values can include:

  • eager - This value loads the image immediately.
  • lazy - This value defers the image’s loading until it reaches a certain distance from the viewport. This improves the performance of your web page.

• referrerpolicy

  The referrerpolicy attribute specifies the referrer information that you wish to send with the link.

  Values can include:

  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • same-origin
  • no-referrer-when-downgrade
  • strict-origin-when-cross-origin
  • unsafe-url

• sizes

  The sizes attribute specifies the image sizes between breakpoints. It is used in combination with a media condition. For example:

  <img
    src="example.jpg"
    srcset="example.jpg 2000w,
            example-thumb.jpg 400w,
            example-medium.jpg 1000w,
            [email protected] 4000w"
    sizes="100vw">

• src

  The src attribute specifies the URL to the image.

• srcset

  The srcset attribute specifies an URL to an image along with a width descriptor (positive integer followed by w), or a pixel density descriptor (a number followed by x). It determines the set of images the browser can choose from with each image being a different size. The width or density descriptor is based upon the image’s real size. For example:

  <img
    src="example.jpg"
    srcset="example.jpg 2000w,
            example-thumb.jpg 400w,
            example-medium.jpg 1000w,
            [email protected] 4000w"
    sizes="100vw">

• usemap

  The usemap attribute specifies whether the image is to be used as part of an image map. See <area> for more details.

• width

  The width attribute specifies the width of the <img> element in pixels.

Best Practices

• You should use the alt attribute, so if the image does not display for any reason, a text description of the image is provided. This is especially important for non-visual browsers used by users with visual impairments.

  The alt attribute value should adequately describe the contents of the image, for example:

  <img width="800" height="450" 
  src="https://res.cloudinary.com/thewebmaster/image/upload/image/moon-earth.png"
  alt="Moon and Earth displayed in space.">

• The title attribute should not be used instead of the alt attribute. Furthermore, duplicating the same description in both attributes may cause screen readers to announce it twice.

• If you wish to caption an image you should use the <figure> and <figcaption> elements.

Specification

• HTML Living Standard Specification
• HTML5 Specification

Browser Support

Desktop

Mobile