Path // www.yourhtmlsource.com → Reference → <IMG> ELEMENT

<img> element

by Ross Shannon

The <img> element embeds an image into the document. It is a void element (self-closing) that requires at minimum a src attribute specifying the image location and an alt attribute providing alternative text for accessibility. Images are one of the most common elements on the web, used for photographs, illustrations, icons, and visual content.

Clock This page was last updated on 2025-11-17


Syntax

The <img> element is a void element that does not have a closing tag:

<img src="photo.jpg" alt="Description of the image">

Key Attributes

  • src (required) — The URL of the image file. Can be a relative path, absolute path, or full URL.
  • alt (required) — Alternative text describing the image. Essential for accessibility. Should be empty (alt="") only for decorative images.
  • width — The intrinsic width of the image in pixels. Helps prevent layout shift during loading.
  • height — The intrinsic height of the image in pixels. Use with width to reserve space.
  • loading — Controls lazy loading behavior. Values: lazy (defer loading until near viewport) or eager (load immediately, default).
  • decoding — Hints how the browser should decode the image. Values: sync, async, or auto.
  • srcset — Defines multiple image sources for responsive images, allowing the browser to choose the best size.
  • sizes — Specifies the intended display size of the image at different viewport widths. Used with srcset.
  • crossorigin — Configures CORS requests for the image. Values: anonymous or use-credentials.
  • referrerpolicy — Controls what referrer information is sent when fetching the image.

The following attributes are obsolete and should be replaced with CSS:

  • align — Use CSS float or vertical-align instead
  • border — Use CSS border property instead
  • hspace / vspace — Use CSS margin instead

Examples

Basic Image with Alt Text

<img src="sunset.jpg" alt="Orange and purple sunset over the ocean">

Image with Dimensions

<img src="logo.png" alt="Company Logo" width="200" height="100">

Specifying dimensions prevents layout shift as the page loads, improving Core Web Vitals scores.

Lazy-Loaded Image

<img src="product.jpg" alt="Red wireless headphones" width="400" height="300" loading="lazy">

Lazy loading defers image loading until the user scrolls near it, improving initial page load performance.

Responsive Image with srcset

<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w,
         hero-800.jpg 800w,
         hero-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px,
        (max-width: 1000px) 800px,
        1200px"
  alt="Mountain landscape at sunrise"
  width="1200" height="800">

The browser selects the most appropriate image size based on the viewport width and device pixel ratio.

When to Use

Accessibility Considerations:

  • Always provide meaningful alt text that describes the image’s content or function
  • For decorative images (backgrounds, spacers), use alt="" to have screen readers skip them
  • Don’t start alt text with “Image of” or “Picture of” — screen readers already announce it as an image
  • For complex images (charts, infographics), provide detailed descriptions or link to a text alternative
  • If an image contains text, include that text in the alt attribute

Performance Best Practices:

  • Always specify width and height to prevent Cumulative Layout Shift (CLS)
  • Use loading="lazy" for images below the fold
  • Provide appropriately sized images using srcset for responsive designs
  • Use modern formats like WebP or AVIF with fallbacks when possible
  • Compress images to reduce file size without significant quality loss
  • <figure> — Container for images with captions
  • <figcaption> — Caption for a figure
  • <picture> — Container for multiple image sources for art direction
  • <source> — Specifies media resources for picture, audio, or video
  • <map> — Defines an image map
  • <area> — Defines clickable areas within an image map