Include an image

img

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 srcset and sizes attributes.

Image decompression can be delayed with the decoding attribute.

Images hosted on a different server can be requested via CORS with the cross-origin attribute.

Properties

src
Use sourceref notation to identify the media file containing the image.
alt
Provide a text description of the image for use by assistive technologies (required).
title
Associate additional text with the image to be displayed as a tooltip when the mouse hovers over the image.
height
The height of the image, in pixels, but specified without units.
width
The width of the image, in pixels, but specified without units.
usemap
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.
ismap
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 https://api.example.com?75,99.
srcset
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"
sizes
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.
decoding
When should the image be converted from its compressed form?
Specify sync to decompress it at the point in time it is needed for rendering.
Specify async to decompress it later on, after the rest of the document has been rendered.
crossorigin
Use this to fetch the image using CORS.
Specify anonymous to simply send a request for the image with an "Origin" header.
Specify use-credentials to send a rquest with "Origin" and credentials.

Examples

img `/over-the-top.png` *alt="Arm Westling with Sylvester Stallone"
Simplest form

img `wine-regions.png` *usemap="#wines"

map *name=wines {
area *shape=circle *coords=50,50,25 `pinot.html`
area *shape=circle *coords=150,50,25 `chardonnay.html`
area *shape=circle *coords=50,150,25 `zinfandel.html`
area *shape=circle *coords=150,150,25 `sauvignon.html`
}
An image overlaid with a client-side map interface

// Clicking at (75,99) sends HTTP GET https://api.example.com?75,99

div {
a `https://api.example.com` <<img `electorate.png` *ismap>>
}
An image used as a server-side map interface

img `wheres-waldo.jpeg` *width=2500 *height=1500 *decoding=async
Delaying decompression until web layout is fully composed

img `https://other.example.tld/glorious.jpeg` *crossorigin=anonymous
Fetching an image from another domain that requires CORS

// the base image is at 1x resolution        

img `baseimg.png` *srcset="altimg2.png 2x,
altimg3.png 3x,
altimg4.png 4x"
A responsive image with alternate resolutions

img `baseimg.png` *srcset="baseimg.png 800w,
altimg2.png 400w,
altimg3.png 200w"
*sizes="(min-width: 1200px) 45vw,
(min-width: 800px) 35vw,
25vw"
A responsive image with alternate widths

See also

map
The map element is used with a set of areas, allowing a single image overlay to have multiple hotspots hyperlinked to distinct documents.
area
An area defines a portion of an overlaid image to be used as a hyperlink to a destination when clicked.
picture
The picture element allows the browser and server to negotiate which version of an image to use.
source
Each source element provides one version of a media file, allowing the browser to negotiate which one to use.

semantax > media-embed > imgInclude an image

🔎