Image Size Caption

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

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

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.