HTML <img> Tag
Description
The HTML <img> element embeds an image into the document. It is a void element (self-closing), meaning it has no closing tag.
Images are essential for web content. Always provide descriptive alt text for accessibility — screen readers use the alt attribute to describe images to visually impaired users, and it also displays when the image fails to load.
CSS Display:
inline-blockSyntax
<img src="image.jpg" alt="Description of image">Popular Attributes
| Attribute | Description |
|---|---|
| srcRequired | Specifies the path or URL to the resource file. |
| altRequired | Provides alternative text for the image. Critical for accessibility and SEO. |
| width | Sets the display width of the element in pixels or as a percentage. |
| height | Sets the display height of the element in pixels or as a percentage. |
| loading | Specifies lazy loading behavior. Values: lazy (defers loading until near viewport), eager (loads immediately, default). |
| title | Provides advisory text, often displayed as a tooltip on hover. |
This element also supports global HTML attributes such as class, id, style, data-*, and more.
Examples
Basic Image
<img src="https://htmlsave.com/favicon-96x96.png" alt="HTML Save Logo">
Displays an image with alt text for accessibility.
Image with Dimensions
<img src="https://htmlsave.com/favicon-96x96.png" alt="HTML Save Logo" width="48" height="48">
Setting width and height prevents layout shift as the image loads.
Lazy Loading
<img src="https://htmlsave.com/favicon-96x96.png" alt="HTML Save Logo" loading="lazy">
Lazy loading defers loading images that are below the fold, improving page performance.
Notes
Always include both width and height attributes to prevent Cumulative Layout Shift (CLS), which is a Core Web Vital metric that affects SEO.
Use loading="lazy" for images that are not immediately visible when the page loads to improve performance.