<img>

Since:		HTML 4（1997）

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

sample_img.html

<!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="/reps/html-beginner/img/sample.jpg"
      alt="Photo of a cat"
      width="400" height="221">
  </p>

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

  <!-- Images below the fold should use lazy loading -->
  <p>
    <img src="/reps/html-beginner/img/test.jpg"
      alt="Announcement banner"
      width="640" height="354"
      loading="lazy"
      decoding="async">
  </p>

</body>
</html>

Output

A photo of a cat is displayed. A small decorative icon and the text "What's New" appear side by side, and the announcement banner at the bottom of the page is loaded lazily when it scrolls into view.

View sample page

Responsive Images with srcset and sizes

The srcset attribute lets the browser automatically choose the best image file based on screen resolution or viewport width. High-resolution (Retina) displays get a high-DPI version, while standard screens get a smaller file — saving bandwidth.

<!-- Resolution-based selection (1x / 2x) -->
<img
  src="logo.png"
  srcset="logo.png 1x, logo@2x.png 2x"
  alt="Logo"
  width="200" height="80">

<!-- Width-based selection (use with sizes) -->
<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Landscape photo"
  width="800" height="450"
  loading="lazy">
<!-- sizes means: if viewport <= 600px, image width = 100vw; otherwise 800px -->

Styling with CSS (object-fit)

When displaying images inside a fixed-size container, the object-fit property lets you control how the image is scaled and cropped while preserving its aspect ratio. It is commonly used for card thumbnails.

<style>
  /* Card thumbnail: fixed size, crop to fill while preserving aspect ratio */
  .card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;       /* Crop the overflow */
    object-position: center; /* Crop from the center */
  }

  /* Standard responsive image */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Circular avatar */
  .avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
  }
</style>

<div class="card">
  <img class="card-img" src="article-thumb.jpg" alt="Article thumbnail">
</div>

<img class="avatar" src="user.jpg" alt="User avatar" width="64" height="64">

object-fit value	Description
fill	Default. Stretches the image to fill the container (may distort aspect ratio).
contain	Scales the image to fit inside the container while preserving the aspect ratio. May leave empty space.
cover	Scales the image to cover the entire container while preserving the aspect ratio. Overflowing parts are clipped.
none	Displays the image at its natural size. May overflow the container.
scale-down	Uses whichever is smaller between `none` and `contain`.

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;.