<img>

The img element embeds an image into an HTML page. It is a void element with no closing tag. Use the src attribute to specify the image URL and the alt attribute to provide alternative text.

Syntax

<!-- Basic image embed -->
<img src="photo.jpg" alt="Mountain landscape photo">

<!-- Explicit dimensions (recommended to prevent layout shifts) -->
<img src="logo.png" alt="Site logo" width="200" height="80">

<!-- Lazy loading (for images below the fold) -->
<img src="banner.jpg" alt="Banner" loading="lazy">

Attributes

Attribute	Description
src	Specifies the URL (path) of the image file to display. This attribute is required.
alt	Specifies alternative text for the image. Used when the image cannot be displayed or when a screen reader reads the content aloud.
width	Specifies the display width of the image in pixels.
height	Specifies the display height of the image in pixels.
loading	Controls when the image is loaded. Accepts `lazy` (deferred loading) or `eager` (immediate loading).
decoding	Specifies how the image is decoded. Setting `async` decodes the image asynchronously without blocking other content.

Sample Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>img element</title>
  <style>
    img { max-width: 100%; height: auto; }
  </style>
</head>
<body>

  <!-- Basic image with explicit width and height to prevent layout shifts -->
  <p>
    <img src="https://placehold.jp/400x200.png"
      alt="Sample image 400x200"
      width="400" height="200">
  </p>

  <!-- Decorative images should have an empty alt attribute -->
  <p>
    <img src="decoration.png" alt="" width="32" height="32">
    What's New
  </p>

  <!-- Images below the fold should use lazy loading -->
  <p>
    <img src="footer-banner.jpg"
      alt="Contact banner"
      width="800" height="100"
      loading="lazy"
      decoding="async">
  </p>

</body>
</html>

Output

A 400x200 placeholder image is displayed. A small decorative icon and the text "What's New" appear side by side, and the footer banner is loaded lazily when it scrolls into view.

Rendered HTML (diagram)

Notes

The alt attribute is important for both accessibility and SEO. Write a concise description of what the image conveys so users relying on screen readers understand the content. On the other hand, decorative images that carry no meaning (dividers, background patterns, etc.) should use alt="" (an empty string). Omitting the attribute entirely causes screen readers to read out the filename instead.

It is strongly recommended to specify width and height attributes. By knowing the image dimensions in advance, the browser can reserve space during page layout, preventing the "layout shift (CLS)" that occurs after the image loads and improving your Core Web Vitals score.

Set loading="eager" (the default) for important above-the-fold images and loading="lazy" for images that require scrolling to see. This improves initial page load speed. The standard CSS approach for responsive images is to apply max-width: 100%; height: auto;.