The img element

Definition

The img element embeds an image. Its text alternative communicates the image’s purpose when the image is unavailable or not perceived visually.

Syntax

<img
  src="team-workshop.webp"
  width="1200"
  height="800"
  alt="Three learners comparing their page layouts"
  loading="lazy"
/>

Key attributes

src selects a resource. alt provides the text alternative. width and height reserve aspect ratio. srcset and sizes can select responsive resources. Avoid lazy-loading the likely largest above-the-fold image.

Intrinsic width and height let the browser reserve the correct aspect ratio before the file arrives, reducing layout shift. CSS can still make the image fluid with a maximum inline size and automatic block size.

Accessibility

Write alt for the image’s purpose in context. Use alt="" for a genuinely decorative image so it can be skipped. Complex charts need a fuller nearby equivalent.

Do not begin alternative text with “image of” when the element already exposes an image role. Describe the information or function that the surrounding text does not already provide. A linked image needs text that identifies the link destination or action, not merely its appearance.

Responsive sources

Use srcset with width descriptors and an accurate sizes value when the same image content is available at several resolutions. Use picture when art direction or file-format fallback changes which source is appropriate. The fallback img remains required.

Test actual network selection in browser developer tools. An inaccurate sizes="100vw" can make the browser download an oversized file when the image occupies only part of the layout.

Loading and performance

Compress images to a suitable modern format without destroying needed detail. Do not lazy-load a likely Largest Contentful Paint image; discover it early and prioritize it only when evidence supports the choice. Lazy-loading below-the-fold images can reduce initial work.

Avoid base64-encoding large images into HTML or CSS. Cache stable assets, use descriptive filenames where practical, and verify dimensions and transfer size on the production host.

Common misuse

Do not put important text only in an image, repeat adjacent captions, or use unbounded high-resolution files for small displays.

Verification checklist

• Disable images and confirm equivalent information remains.
• Inspect each image in context to choose informative or empty alt.
• Confirm intrinsic dimensions prevent layout shift.
• Test responsive source selection at narrow and wide viewports.
• Measure the production transfer size and LCP candidate.
• Zoom to 200% and confirm images do not cover text or force page overflow.