Embedded Media

Image Size Caption

Keep Media Stable and Described

A figure reserves image space, describes the chart, captions it, and links to the underlying text data.

Program

Images need more than a file path. Good media markup gives the browser a stable box and gives readers a useful text alternative.

image_size_caption.html
Visuals: captured from real browser rendering
<figure class="media-card">
  <img src="sales-chart.png" alt="Bar chart showing sales rising from 10 to 14." width="320" height="180" loading="lazy">
  <figcaption>Sales trend for the week.</figcaption>
  <p><a href="sales-chart.txt">Read the chart data</a></p>
</figure>

  1. Create the media figure.

    An empty media figure card is introduced.
    The figure creates one group for the image, caption, and data link.

  2. Add the chart image and alt text.

    The sales chart image appears inside the figure with alt text called out.
    The alt text describes the chart's meaning, not just that it is an image.

  3. Reserve stable image dimensions.

    The chart image sits in a reserved 320 by 180 area.
    Width and height reduce layout shift while the image loads.

  4. Attach the visible caption.

    The figure shows the chart with a visible Sales trend caption below it.
    The figcaption keeps nearby context tied to the chart.

  5. Link to the chart data.

    A Read the chart data link appears below the chart caption.
    The text data link gives readers a direct way to inspect the chart values.
width and height Image width and height let the browser reserve space before the file finishes loading.
figcaption figcaption gives visible context for the media inside a figure.