Images

Learn to embed images correctly using <img>, write meaningful alt text, size images to avoid layout shift, and caption them with <figure>/<figcaption>.

Text alone rarely tells the whole story. Diagrams, screenshots, photos, and icons make a page easier to understand and more engaging to look at. HTML gives you one primary tool for this: the <img> element. It looks simple — one tag, a couple of attributes — but using it well touches accessibility, performance, and page stability all at once.

The <img> Element

<img> is a void (self-closing) element — it has no closing tag and no content between tags, because the 'content' is the image file itself, referenced through the src attribute. The browser fetches that file and paints it into the page at the point where the tag appears.

Two attributes matter on every single image you ever write: src (where the file lives) and alt (what the image means). Skipping alt is one of the most common accessibility failures on the web, and it is entirely avoidable.

• src — the path or URL to the image file (relative or absolute) • alt — a text description used by screen readers and shown if the image fails to load • width / height — the image's intrinsic dimensions, reserving space before the image loads • loading — hints to the browser about when to fetch the image (e.g. lazy)

Why alt Text Is Not Optional

The alt attribute serves three purposes at once. Screen reader users hear it read aloud in place of the image, so it needs to convey the same information a sighted user would get from looking at the picture. If the image fails to load — a broken link, a slow connection, a typo in the file name — the browser displays the alt text instead of a broken-image icon. And search engines use alt text to understand what an image depicts, which affects image search results.

Good alt text describes the content and function of the image in context, not the fact that it is an image ('a golden retriever running on a beach' rather than 'image of dog'). For purely decorative images that add no information — a divider flourish, a background pattern — use an empty alt="" so screen readers skip over it silently instead of reading a useless description. Never omit the attribute entirely; an image with no alt attribute at all is announced by screen readers as its raw file name, which is often meaningless.

Reserving Space with width and height

When a browser doesn't know an image's dimensions in advance, it has to render the page without a placeholder, then jolt everything below the image downward once the file finishes downloading and its true size is known. This sudden jump is called layout shift, and it is jarring for readers and actively penalized by search engines as a page-quality signal.

Setting width and height attributes (in pixels, matching the image's actual aspect ratio) tells the browser the image's proportions before it downloads, so it can reserve exactly the right amount of space in the layout immediately. The image can still be resized visually with CSS — the HTML attributes are about reserving the correct aspect ratio, not locking the display size.

A Preview of Responsive Images

A single fixed-size image looks fine on a desktop monitor but wastes bandwidth on a phone, or looks blurry on a high-density retina display. HTML has attributes for offering the browser multiple versions of the same image and letting it pick the best one for the current screen: srcset lists candidate image files with their widths, and sizes describes how much space the image will occupy at different viewport widths.

This is a deep topic covered in full later in the course — for now, just recognize that srcset and sizes exist as the standard, native way to serve appropriately-sized images without JavaScript.

Lazy Loading

A long page with dozens of images doesn't need to download every single one the instant the page opens — images far below the fold can wait until the user actually scrolls near them. Adding loading="lazy" to an <img> tells the browser to defer fetching that image until it is close to entering the viewport, which speeds up initial page load, especially on slower connections.

Don't lazy-load images that appear near the top of the page (above the fold) — deferring those can actually delay what the user sees first. Reserve loading="lazy" for images further down the page.

Captions with <figure> and <figcaption>

When an image needs a caption — a label, a source credit, an explanatory note — wrap the image (or any self-contained piece of content, like a code block or chart) in a <figure> element and place a <figcaption> inside it. This creates a semantic, machine-readable relationship between the content and its caption, distinct from just putting a styled <p> underneath an <img> and hoping it reads as a caption.

<figure> can hold more than one image, or other content entirely — its defining trait is that it's a self-contained unit that could be moved elsewhere in the document without breaking the flow of the surrounding text, much like a figure in a printed book.

Basic Image Syntax

<img> is a void element — no closing tag, no separate </img> alt is required on every <img>, even if empty (alt="") for decorative images width/height set the aspect ratio the browser reserves, not necessarily the final display size

<img src="diagram.png" alt="Block diagram of a four-stroke engine cycle" width="600" height="400" loading="lazy">

Code Examples

src points to the file, alt describes the image's content for screen readers and as a fallback, and width/height reserve the correct aspect ratio in the layout before the file downloads.

alt="Close-up of a green PCB with surface-mount resistors and a microcontroller"

This swirl is purely decorative and carries no information a screen reader user needs. alt="" (present but empty) tells assistive technology to skip it silently, rather than announce a meaningless file name.

Common mistake: Omitting alt entirely here would cause screen readers to read the raw file name aloud instead of staying silent.

loading="lazy" defers this image's download until the user scrolls near it — appropriate here because it's assumed to sit far down a long technical article.

The browser picks the best-fitting file from srcset based on the device's screen size and density, guided by the sizes hint. src remains as a fallback for browsers that don't support srcset. Full depth on this is covered in a later lesson. This is a preview only — you are not expected to master srcset math yet.

<figure> groups the image with its caption as one semantic unit, and <figcaption> is understood by browsers and assistive technology as specifically captioning the content inside the <figure>.

<img
  src="images/circuit-board.jpg"
  alt="Close-up of a green PCB with surface-mount resistors and a microcontroller"
  width="800"
  height="533">

<img src="images/divider-swirl.svg" alt="" width="200" height="20">

<img
  src="images/schematic-page7.png"
  alt="Schematic page 7: power supply regulation stage"
  width="1000"
  height="700"
  loading="lazy">

<img
  src="photo-800w.jpg"
  srcset="photo-400w.jpg 400w, photo-800w.jpg 800w, photo-1200w.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Team standing in front of the robotics lab entrance"
  width="800" height="533">

<figure>
  <img
    src="images/bridge-truss.jpg"
    alt="Steel truss bridge spanning a river gorge"
    width="900" height="600">
  <figcaption>Fig. 3 — A Warren truss bridge, chosen for its efficient distribution of tension and compression.</figcaption>
</figure>

Important Rules

Every <img> must have an alt attribute — use alt="" only for purely decorative images.

Write alt text that describes meaning and content, not the literal words 'image of' or 'picture of'.

Always include width and height (matching the real aspect ratio) to prevent layout shift.

Use loading="lazy" for images below the fold, but not for images visible immediately on load.

Use <figure>/<figcaption> when an image needs a caption, not a bare <p> styled to look like one.

Why This Matters in Practice

Search engines, screen readers, and page-speed audits (like Google Lighthouse) all grade pages partly on image handling — missing alt text and layout shift from unsized images are two of the most common issues flagged in real accessibility and performance audits.

Missing alt and dimensions harms accessibility and causes layout shift while the image loads.

Using the file name as alt text tells a screen reader user nothing useful — describe what the image actually shows or represents.

[Identify the Error] A teammate writes the following to embed a product photo. What is the most significant problem with it? <img src="product.jpg" alt="product.jpg" style="width:300px"> A. It should use a <picture> element instead of <img> B. The alt text just repeats the file name instead of describing the image's content C. Inline style attributes are never allowed in HTML D. src must always be an absolute URL, never a relative path

B. The alt text just repeats the file name instead of describing the image's content — alt="product.jpg" gives a screen reader user no real information — it's the file name, not a description. It should describe what the photo actually shows, e.g. alt="Blue ceramic coffee mug with wooden handle". The other options are not real requirements of HTML.

Add a captioned, accessible, lazy-loaded image of a 'wiring diagram' to a page. Include meaningful alt text, width/height, loading="lazy", and wrap it in a <figure> with a <figcaption>.

<figure> <img src="wiring-diagram.png" alt="Wiring diagram showing battery, switch, and LED in series" width="700" height="500" loading="lazy"> <figcaption>Fig. 1 — A basic series circuit with a switch-controlled LED.</figcaption> </figure>

Start with <figure>, then <img> with all four attributes, then <figcaption>, then close </figure>.