Images in HTML

An image is added with the empty <img> element: src is the file and alt is the text description for when the image is not visible or for screen readers. For a purely decorative image leave alt="" empty.

<img src="images/bridge.jpg"
     alt="Evening view of a stone bridge over a river"
     width="640" height="400">

• Keep alt short and meaningful; do not begin with “image of”.
• Setting width and height stops the page from jumping while it loads.

JPEG or WebP suit photos, PNG suits logos needing transparency, and SVG suits simple drawings. Shrink large files before uploading. loading="lazy" delays images that are off-screen.

<img src="photo.webp" alt="Mountain village" loading="lazy" width="800" height="500">

To show an image with a caption use <figure> and <figcaption>; the caption becomes logically tied to the image. For different screen sizes, <picture> can offer several sources.

<figure>
  <img src="map.png" alt="Map of the old town">
  <figcaption>Fig. 1 — The old town and its main gates.</figcaption>
</figure>

<picture>
  <source media="(min-width: 800px)" srcset="wide.webp">
  <img src="narrow.webp" alt="Harbour at sunrise">
</picture>