HTML Images and Responsive Images

The <img> element embeds images into a page. Unlike most HTML elements, it is a self-closing (void) element with no separate closing tag, and it depends heavily on a few attributes to behave correctly, accessibly, and efficiently.

Why it matters

Images are usually the largest files on a page, and the most common accessibility failure on the web is an image with no text alternative. Three attributes do most of the work: alt for people who cannot see the image, width and height to stop the page jumping as it loads, and loading to delay images that are off screen.

The src and alt Attributes

src points to the image file, either as a relative or absolute path. alt provides a text alternative describing the image's content or purpose, which is read aloud by screen readers, displayed if the image fails to load, and used by search engines to understand image content. Purely decorative images (a background flourish with no informational value) should use alt="" (an empty but present attribute) so screen readers skip over them silently instead of reading a distracting filename.

Width, Height, and Layout Shift

Setting explicit width and height attributes on an <img> lets the browser reserve the correct amount of space before the image finishes loading, preventing the surrounding content from visibly jumping around as images load in — a problem known as cumulative layout shift. CSS can still control the final displayed size responsively; the HTML attributes primarily establish the image's aspect ratio for layout reservation.

Responsive Images with srcset

The srcset attribute lets you offer multiple versions of an image at different resolutions, so the browser can pick the most appropriate one for the user's screen density and viewport size instead of always downloading one large file. This improves load performance on smaller or lower-density screens without sacrificing quality on larger, high-resolution ones.

Example

<img
  src="team-photo-800w.jpg"
  srcset="team-photo-400w.jpg 400w, team-photo-800w.jpg 800w, team-photo-1200w.jpg 1200w"
  sizes="(max-width: 600px) 400px, 800px"
  width="800"
  height="533"
  alt="The Webnest Studio team standing outside the office">

Displays a photo of the team, reserving 800x533 space to avoid layout shift, while the browser downloads whichever source image best matches the viewer's screen size; a screen reader announces "The Webnest Studio team standing outside the office."

Exercise

Add two images. The first is a meaningful photo, team.jpg, 600 by 400 pixels, with the alternative text The WebNest team at their desks, loaded lazily. The second is a purely decorative divider, divider.png, which screen readers should skip.

Expected result: two img elements with correct attributes (the files do not exist, so the browser shows the alternative text of the first and nothing for the second).

<h1>About us</h1>

<!-- TODO: the team photo -->

<!-- TODO: the decorative divider -->

<h1>About us</h1>

<img src="team.jpg" alt="The WebNest team at their desks" width="600" height="400" loading="lazy">

<img src="divider.png" alt="">

Quick quiz

Interview questions