Home > Abakada: Back to Basics > Language References > HTML Elements > IMG Element
| Embeds a still or animated image in a document. | HTML 2, 3.2, 4, 4.01, 5 |
HTML Syntax
<img
alt = alt_text
crossorigin = anonymous | use-credentials
decoding = sync| async | auto
fetchpriority = high | low | auto
height = int | percentage
ismap
loading = eager | lazy
referrerpolicy = no-referrer | no-referrer-when-downgrade | origin |
origin-when-cross-origin | unsafe-url
sizes = auto | ( media_condition ) length
src = url
srcset = url-list
usemap = #mapname
width = int | percentage
>
NOTE: Only the <img> start tag must be present. The element has no end tag.
The <img> element embeds an image on a page.
In its most basic form, the src attribute must be present, to indicate the source file of the image to display. Otherwise, no image is rendered.
<img src="someImage.jpg" ...>
The alt attribute holds a textual replacement or alternative text for the image, and is mandatory for accessibility purposes. Screen readers read this value out to their users so they know what the image means.
Alternative text is also displayed if for some reason the image cannot be loaded, for example, due to network or source file errors.
One way to think of alternative text is like how you would describe the image to someone who cannot see the image, for example over the phone.
<img src="someImage.jpg" alt="Zebras in the Serengeti" ...>
Some guidelines for authoring meaningful alternate descriptions.
The width and height attributes specify the size of the image, and while the image will render even without declaring them, authors are encouraged to use said attributes to pre-set or fix the position of the image on the page and prevent the page layout from shifting after the image loads.
<img src="someImage.jpg" alt="Zebras in the Serengeti" width=400 height=150 >
An <img> element can serve as a hyperlink if embedded within an A ( anchor ) element, which links the image to a target destination.
<a href="serengeti.com"><img src="someImage.jpg"
alt="Zebras in the Serengeti" width=400 height=150></a>
The usemap attribute allows an image to be set as an image map, with multiple clickable areas that link to different URLS.
<img src="solarsys.jpg" alt="Our solar system" usemap="#solarsys">
Other attributes to achieve various purposes are described below.
The <img> element supports the following attributes, in addition to global attributes common to all HTML elements.
| alt | text | Specifies an alternate text for an image |
| crossorigin | anonymous, use-credentials | Allow images from third-party sites that allow cross-origin access to be used with canvas |
| height | pixels | Specifies the height of an image |
| ismap | ismap | Specifies an image as a server-side image map |
| loading | eager, lazy | Specifies whether a browser should load an image immediately or to defer loading of images until some conditions are met |
| longdesc | URL | Specifies a URL to a detailed description of an image |
| referrerpolicy | no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-url | Specifies which referrer information to use when fetching an image |
| sizes | sizes | Specifies image sizes for different page layouts |
| src | URL | Specifies the path to the image |
| srcset | URL-list | Specifies a list of image files to use in different situations |
| usemap | #mapname | Specifies an image as a client-side image map |
| width | pixels | Specifies the width of an image |
The HTML standard does not specify what image formats to support, so support for different formats are vendor-specific, and may vary.
The more common types widely supported across most browsers though are:
- GIF ( Graphics Interchange Format )
- JPEG ( Joint Photographic Experts Group )
- PNG ( Portable Network Graphics )
Some newer image formats that are increasingly gaining broad support are:
- APNG ( Animated Portable Network Graphics )
- AVIF ( AV1 Image File Format )
- SVG ( Scalable Vector Graphics )
- WebP ( Web Picture format )
Mozilla has published a helpful Image file type and format guide.
Always test for support across different browsers when intending to use the newer image formats.
Alternately, the <picture> element offers a better option for the newer formats, as it provides compatibility fallbacks for images, in cases when a browser does not support a specific image type.
The following example shows how the <img> element may be used.
<a href="serengeti.com"><img src="someImage.jpg" alt="Zebras in the Serengeti"
width=400 height=150 title="Visit Serengeti National Park"></a>
AREA INPUT type=image MAP PICTURE