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

Include an image

img

Properties

Examples

See also