![]()
: The IMG Element
Last updated: 2026-09-12
<img>The IMG Element
The <img> element embeds an image in the page. It's a void element (no closing tag). The src and alt attributes are required: src specifies the image URL, alt provides alternative text (important for accessibility and SEO).
| Category | Links & Media |
|---|---|
| Content Model | None (void element) |
| Allowed Parents | Any element that accepts phrasing content |
| Content Tag | Self-closing — no closing tag needed |
| Status | Standard |
📝 Syntax
<img src="image-url" alt="alternative text" width="width" height="height">⚙️ Attributes
This element supports the global attributes plus the following:
| Attribute | Value | Description |
|---|---|---|
src | URL | The URL of the image file, either relative or absolute. |
alt | Text | Alternative text shown when the image can't load; also read by screen readers. |
width | Pixels | The display width of the image in pixels. |
height | Pixels | The display height of the image in pixels. |
loading | Keyword | The loading strategy for the image.
|
srcset | URL list | A list of candidate images for different screen sizes (responsive images). |
sizes | Media condition list | Describes the display width of the image at different viewports. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <img> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Warning： Don't omit the alt attribute — critical for screen readers and SEO. Use alt="" for purely decorative images.
❓ FAQ
QIs the alt attribute required for ![]()
?
AYes, the
alt attribute is required for accessibility. Use alt="" (empty) for purely decorative images, and a descriptive text for informative images. Screen readers rely on alt to describe images to blind users.QWhat's the difference between ![]()
and ?
A
<img> loads a single image. <picture> contains multiple <source> elements to serve different images based on viewport, resolution, or format support (like WebP vs JPEG).QShould I use width and height attributes on ![]()
?
AYes, always include
width and height attributes (matching the image's intrinsic dimensions). This prevents Cumulative Layout Shift (CLS) and improves Core Web Vitals scores.🏷️ Related Tags
💡 Related Cases
📚 Related Tutorials
