HTML - <img>

The HTML <img> element represents an image in the document.


Example 1:  Alternative text

<img src="mdn-logo-sm.png" alt="MDN">


Example 2: Image link

<a href="">MDN<img src="mdn-logo-sm.png" alt="MDN"></a>


Example 3: Using the srcset attribute

The src attribute is a 1x candidate in user agents that support srcset.

<img src="mdn-logo-sm.png"
     srcset="mdn-logo-HD.png 2x">

Example 4: Using the srcset and sizes attributes

The src attribute is ignored in user agents that support srcset when using 'w' descriptors. When the (min-width: 600px) media condition matches, the image will be 200px wide, otherwise it will be 50vw wide (50% of the viewport width).

 <img src="clock-demo-thumb-200.png" 
      srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w"
      sizes="(min-width: 600px) 200px, 50vw">


The HTML <img> element represents an image in the document.

Usage note: Browsers do not always display the image referenced by the element. This is the case for non-graphical browsers (including those used by people with vision impairments), if the user chooses not to display images, or if the browser cannot display 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.

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 an empty element.
Tag omission Must have a start tag and must not have an end tag.
Permitted parent elements Any element that accepts embedded content.
DOM interface HTMLImageElement

Browser Compatibility  

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)
srcset 34.0 (Yes) 32.0 (32.0)[2] No support 21 7.1
referrerpolicy 46.0[1] ? 42.0 (42.0)[3] ? ? ?
Feature Android Android Webview Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)
srcset ? 34.0 No support No support 21 iOS 8 34.0
referrerpolicy ? 46.0 [1] 42.0 (42.0)[3] ? ? ? 46.0[1]

[1] Implemented as referrerpolicy and behind a flag.

[2] Implemented behind a preference.

[3] Behind the network.http.enablePerElementReferrer preference, that default to false. From Firefox 42 to Firefox 44, the attribute was called referrer.

See Also  


Specification Status Comment
Referrer Policy
The definition of 'referrer attribute' in that specification.
Working Draft Added the referrerpolicy attribute.
WHATWG HTML Living Standard
The definition of '<img>' in that specification.
Living Standard  
The definition of '<img>' in that specification.
HTML 4.01 Specification
The definition of '<img>' in that specification.

Supported image formats

The HTML standard doesn't give a list of image formats that must be supported, so each user agent supports a different set of formats. Gecko supports:

Interaction with CSS

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.

Depending on its type, an image may have an intrinsic width and height. For some image types, however, intrinsic dimensions are not necessary. SVG images, for instance, have no intrinsic dimensions.


© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.

Content Element embedded Graphics HTML Reference