Media and embeds
Add images and video that load fast, adapt to the screen and make sense without them.
What you will be able to do
- Write useful image alternatives
- Serve responsive images
- Embed video and iframes safely
Media is content. Every image needs a text alternative, every video needs captions and every embed needs a title. Reserve space so the page does not jump while loading.
<figure>
<img
src="avatar-320.jpg"
srcset="avatar-320.jpg 320w, avatar-640.jpg 640w"
sizes="(min-width: 700px) 320px, 90vw"
width="320"
height="320"
alt="Amina Rahman smiling at a desk"
loading="lazy"
decoding="async"
/>
<figcaption>Amina Rahman, learning designer</figcaption>
</figure>
<video controls preload="metadata" poster="cover.jpg">
<source src="intro.webm" type="video/webm" />
<source src="intro.mp4" type="video/mp4" />
<track kind="captions" src="intro.vtt" srclang="en" label="English" default />
</video>
<iframe
src="https://example.com/embed"
title="Course preview"
loading="lazy"
></iframe>| Attribute | Why it matters |
|---|---|
| alt | Replaces the image for screen readers and failed loads |
| width / height | Reserves space and prevents layout shift |
| loading="lazy" | Defers offscreen images until needed |
| srcset / sizes | Lets the browser pick an appropriate file |
| title on iframe | Names the embedded document |
Your turn
EasyAccessible profile image
Add a figure with a 320 by 320 image, useful alt text, lazy loading and a caption.
HTML · starter
<figure>
</figure>Check your understanding before moving on.
Knowledge checkQuestion 1
Which attribute provides the text alternative for an image?
Select an answer to continue
Study tools
Make it yours.
Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.
Sign in to save notes and flashcards.Both are private to your account and stay with your progress.
Sign inFinished reading?
Lock in what you just learned.
0%
Mark this lesson complete to save your place and move one step closer to the certificate.