HTML Images

Add responsive images with useful alternative text.

Images can explain, document, decorate, or act as links. Good HTML reserves their layout space, selects an efficient source, and gives each image the correct text alternative. The right alt decision depends on the image’s purpose in context—not on what objects happen to appear in it.

Write a complete img element

src points to the resource, alt supplies a text alternative, and intrinsic width and height establish an aspect ratio that prevents layout shifts. CSS can still make the image fluid by setting max-width: 100% and height: auto.

<img
  src="team-review.jpg"
  alt="Three developers reviewing an accessibility checklist together"
  width="1200"
  height="800"
  loading="lazy"
>

• Choose alt from the image’s purpose in this context.
• Use empty alt for decoration.
• Include intrinsic dimensions.
• Lazy-load images below the initial viewport.
• Avoid putting essential text only inside an image.

Deliver responsive image sources

srcset gives the browser candidate files and sizes explains the expected rendered width. picture lets art direction or format support change the source. The browser then chooses based on layout, resolution, network, and supported formats.

<picture>
  <source media="(min-width: 800px)" srcset="workspace-wide.webp">
  <source type="image/webp" srcset="workspace.webp">
  <img
    src="workspace.jpg"
    alt="Developer workspace with a code editor and browser preview"
    width="960"
    height="640"
  >
</picture>