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

css

<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

css

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

3Put the element in context

Image alternative text depends on the image’s role. An informative photograph needs a useful description; a purely decorative image generally needs an empty alt value. File dimensions can reserve space, and CSS can scale the image without making it overflow its container.

4Practice with a small page

Place an informative image and a decorative accent in an article. Give each an appropriate alt value and inspect the page with images unavailable. Check the source license and crop before using an external image in a published project.

Finished reading?

Mark this topic as complete to track progress.

<nav> Navigation

Next Topic