docs.rodeo

MDN Web Docs mirror

: The Image Embed element

{{HTMLSidebar}} 

The <img> HTML element embeds an image into the document.

{{EmbedInteractiveExample("pages/tabbed/img.html", "tabbed-standard")}} 

The above example shows usage of the <img> element:

There are many other attributes to achieve various purposes:

Supported image formats

The HTML standard doesn’t list what image formats to support, so {{glossary("user agent","user agents")}}  may support different formats.

[!NOTE] The Image file type and format guide provides comprehensive information about image formats and their web browser support. This section is just a summary!

The image file formats that are most commonly used on the web are:

Formats like WebP and AVIF are recommended as they perform much better than PNG, JPEG, GIF for both still and animated images.

SVG remains the recommended format for images that must be drawn accurately at different sizes.

Image loading errors

If an error occurs while loading or rendering an image, and an onerror event handler has been set for the {{domxref("HTMLElement/error_event", "error")}}  event, that event handler will get called. This can happen in several situations, including:

Attributes

This element includes the global attributes.

Deprecated attributes

Styling with CSS

<img> is a replaced element; it has a {{cssxref("display")}}  value of inline by default, but its default dimensions are defined by the embedded image’s intrinsic values, like it were inline-block. You can set properties like {{cssxref("border")}} /{{cssxref("border-radius")}} , {{cssxref("padding")}} /{{cssxref("margin")}} , {{cssxref("width")}} , {{cssxref("height")}} , etc. on an image.

<img> has no baseline, so when images are used in an inline formatting context with {{cssxref("vertical-align", "vertical-align: baseline")}} , the bottom of the image will be placed on the text baseline.

You can use the {{cssxref("object-position")}}  property to position the image within the element’s box, and the {{cssxref("object-fit")}}  property to adjust the sizing of the image within the box (for example, whether the image should fit the box or fill it even if clipping is required).

Depending on its type, an image may have an intrinsic width and height. For some image types, however, intrinsic dimensions are unnecessary. {{glossary("SVG")}}  images, for instance, have no intrinsic dimensions if their root {{SVGElement("svg")}}  element doesn’t have a width or height set on it.

Accessibility

Authoring meaningful alternate descriptions

An alt attribute’s value should provide a clear and concise text replacement for the image’s content. It should not describe the presence of the image itself or the file name of the image. If the alt attribute is purposefully left off because the image has no textual equivalent, consider alternate methods to present what the image is trying to communicate.

Don’t

<img alt="image" src="penguin.jpg" />

Do

<img alt="A Penguin on a beach." src="penguin.jpg" />

An important accessibility test is to read the alt attribute content together with preceding textual content to see if it conveys the same meaning as the image. For example, if the image was preceded by the sentence “On my travels, I saw a cute little animal:”, the Don’t example could be read by a screen reader as “On my travels, I saw a cute little animal: image”, which doesn’t make sense. The Do example could be read by a screen reader as “On my travels, I saw a cute little animal: A Penguin on a beach.”, which does make sense.

For images used to trigger an action, for example, images nested inside an {{htmlelement("a")}}  or {{htmlelement("button")}}  element, consider describing the triggered action inside the alt attribute value. For example, you could write alt="next page" instead of alt="arrow right". You could also consider adding an optional further description inside a title attribute; this may be read by screen readers if requested by the user.

When an alt attribute is not present on an image, some screen readers may announce the image’s file name instead. This can be a confusing experience if the file name isn’t representative of the image’s contents.

Identifying SVG as an image

Due to a VoiceOver bug, VoiceOver does not correctly announce SVG images as images. Include role="img" to all <img> elements with SVG source files to ensure assistive technologies correctly announce the SVG as image content.

<img src="mdn.svg" alt="MDN" role="img" />

The title attribute

The title attribute is not an acceptable substitute for the alt attribute. Additionally, avoid duplicating the alt attribute’s value in a title attribute declared on the same image. Doing so may cause some screen readers to announce the same text twice, creating a confusing experience.

The title attribute should also not be used as supplemental captioning information to accompany an image’s alt description. If an image needs a caption, use the figure and figcaption elements.

The value of the title attribute is usually presented to the user as a tooltip, which appears shortly after the cursor stops moving over the image. While this can provide additional information to the user, you should not assume that the user will ever see it: the user may only have keyboard or touchscreen. If you have information that’s particularly important or valuable for the user, present it inline using one of the methods mentioned above instead of using title.

Examples

Alternative text

The following example embeds an image into the page and includes alternative text for accessibility.

<img src="favicon144.png" alt="MDN" />

{{ EmbedLiveSample('Alternative_text', '100%', '160') }} 

This example builds upon the previous one, showing how to turn the image into a link. To do so, nest the <img> tag inside the {{HTMLElement("a")}} . You should make the alternative text describe the resource the link is pointing to, as if you were using a text link instead.

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

{{ EmbedLiveSample('Image_link', '100%', '160') }} 

Using the srcset attribute

In this example we include a srcset attribute with a reference to a high-resolution version of the logo; this will be loaded instead of the src image on high-resolution devices. The image referenced in the src attribute is counted as a 1x candidate in {{glossary("User agent", "user agents")}}  that support srcset.

<img src="favicon72.png" alt="MDN" srcset="favicon144.png 2x" />

{{EmbedLiveSample("Using_the_srcset_attribute", "100%", "160")}} 

Using the srcset and sizes attributes

The src attribute is ignored in {{glossary("User agent", "user agents")}}  that support srcset when w descriptors are included. When the (max-width: 600px) media condition matches, the 200 pixel-wide image will load (it is the one that matches 200px most closely), otherwise the other image will load.

<img
  src="clock-demo-200px.png"
  alt="The time is 12:45."
  srcset="clock-demo-200px.png 200w, clock-demo-400px.png 400w"
  sizes="(max-width: 600px) 200px, 50vw" />

{{EmbedLiveSample("Using_the_srcset_and_sizes_attributes", "100%", 350)}} 

[!NOTE] To see the resizing in action, {{LiveSampleLink('Using_the_srcset_and_sizes_attributes', 'view the example on a separate page')}} , so you can actually resize the content area.

Security and privacy concerns

Although <img> elements have innocent uses, they can have undesirable consequences for user security and privacy. See Referer header: privacy and security concerns for more information and mitigations.

Technical summary

Content categories Flow content, phrasing content, embedded content, palpable content. If the element has a usemap attribute, it also is a part of the interactive content category.
Permitted content None; it is a `{{Glossary("void element")}}` .
Tag omission Must have a start tag and must not have an end tag.
Permitted parents Any element that accepts embedded content.
Implicit ARIA role
  • with non-empty alt attribute or no alt attribute: img
  • with empty alt attribute: presentation
Permitted ARIA roles
DOM interface `{{domxref("HTMLImageElement")}}` 

Specifications

{{Specifications}} 

Browser compatibility

{{Compat}} 

See also

In this article

View on MDN