Media & Embedded Content

<img> Images

Embed images with alt text, lazy loading, and responsive sizes.

1Basic Image

Always include alt text — it describes the image for screen readers and shows up if the image fails to load. Width/height attributes prevent layout shift.

Example Code

<img
  src="cat.jpg"
  alt="An orange tabby cat sleeping on a window sill"
  width="400"
  height="300"
  loading="lazy"
/>

2Responsive Images

srcset and sizes let the browser pick the best image for the device, saving bandwidth on small screens.

Example Code

<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Hero image"
/>

Finished reading?

Mark this topic as complete to track progress.

<nav> Navigation

Next Topic