Include an image
The img element is used to display a photograph or graphic drawing within a document.
It may be used as a client-side map when the
usemap attribute is provided. It may also be used as a server-side map when the
ismap attribute is provided.
Responsive image negotiation can be carried out by specifying the
Image decompression can be delayed with the
Images hosted on a different server can be requested via CORS with the
- Use sourceref notation to identify the media file containing the image.
- Provide a text description of the image for use by assistive technologies (required).
- Associate additional text with the image to be displayed as a tooltip when the mouse hovers over the image.
- The height of the image, in pixels, but specified without units.
- The width of the image, in pixels, but specified without units.
- For use when the image is to function as a client-side image map with more than one hyperlink target.
- This attribute should contain the local "#name" of the map element which defines the hyperlinks and their hotspot areas.
- When the image is placed subordinate to an "a" element, clicking on the image will send the x,y position of the mouse to the referenced endpoint.
- For example, if the img element's container is
<<a `https://api.example.com`>>, and the mouse is 75 pixels from the left edge and 99 pixels from the top edge, then the HTTP request will be
- Provide a comma-separated list of responsive images to use as alternatives, to accomodate devices with higher resolutions or different widths. Only the negotiated image is actually downloaded.
- Use "x" specifiers to define alternate pixel densities, for example
srcset="altimg2.png 2x, altimg3.png 3x, altimg4.png 4x"
- Use "w" specifiers to define alternate-width images, for example
srcset="baseimg.png 800w, altimg2.png 400w, altimg3.png 200w"
- When the srcset attribute is provided, and it uses "w" specifiers, then this sizes attribute can also be specified.
- Provide a comma-separated list of CSS @media query conditions to negotiate what the display width of the image should be.
- Each of the comma-separated specifiers should have a media query and a CSS width. For example,
sizes="(min-width: 1200px) 45vw, (min-width: 800px) 35vw, 25vw". The final item is the fallback and should have a CSS width with no accompanying media query.
- The negotiated CSS width will be used — instead of the "width" attribute — and the best srcset image will be downloaded and resized to fit that width.
- When should the image be converted from its compressed form?
syncto decompress it at the point in time it is needed for rendering.
asyncto decompress it later on, after the rest of the document has been rendered.
- Use this to fetch the image using CORS.
anonymousto simply send a request for the image with an "Origin" header.
use-credentialsto send a rquest with "Origin" and credentials.
- The map element is used with a set of areas, allowing a single image overlay to have multiple hotspots hyperlinked to distinct documents.
- An area defines a portion of an overlaid image to be used as a hyperlink to a destination when clicked.
- The picture element allows the browser and server to negotiate which version of an image to use.
- Each source element provides one version of a media file, allowing the browser to negotiate which one to use.