Images & Media

Images, video, and audio make web pages engaging. HTML provides dedicated elements for each media type with rich controls and accessibility features.

Images: The <img> Element

The <img> element embeds an image in the page:

1
<img src="photo.jpg" alt="A sunset over the mountains">

<img> is a void element — no closing tag. Two attributes are required:

The alt Attribute — Critical for Accessibility

1
<!-- ✅ Good: descriptive alt text for informative images -->
2
<img src="chart.png" alt="Bar chart showing 40% revenue growth in Q2 2026">
3

4
<!-- ✅ Good: decorative images should have empty alt -->
5
<img src="decoration.png" alt="">
6

7
<!-- ❌ Bad: missing alt — screen readers read the filename -->
8
<img src="DSC_0012.jpg">
9

10
<!-- ❌ Bad: redundant alt that repeats the caption -->
11
<img src="team.jpg" alt="Team photo">
12
<p>Our amazing team</p>

Rules for alt:

• Informative images: Describe what’s shown
• Decorative images: Use alt="" (empty) — screen readers skip them
• Logo in a link: Use alt="Company Name Home" (describe the link’s purpose)
• Never omit alt — without it, screen readers read the filename

Image Dimensions

1
<!-- Set width and height for layout stability -->
2
<img src="photo.jpg" alt="Description" width="800" height="600">

Always specify width and height to prevent layout shifts when the image loads (Cumulative Layout Shift — a Core Web Vital metric).

Image Formats

1
<!-- Modern approach: provide WebP with JPEG fallback -->
2
<picture>
3
  <source srcset="photo.webp" type="image/webp">
4
  <source srcset="photo.avif" type="image/avif">
5
  <img src="photo.jpg" alt="Description">
6
</picture>

Responsive Images with srcset

Send different image sizes to different screen sizes using srcset and sizes:

1
<img
2
  src="photo-800.jpg"
3
  srcset="
4
    photo-400.jpg 400w,
5
    photo-800.jpg 800w,
6
    photo-1200.jpg 1200w
7
  "
8
  sizes="
9
    (max-width: 600px) 100vw,
10
    (max-width: 1200px) 50vw,
11
    800px
12
  "
13
  alt="Mountain landscape"
14
>

• srcset lists image files with their actual widths
• sizes tells the browser how much space the image will occupy
• The browser selects the best image based on device resolution and viewport

The <figure> and <figcaption> Elements

Group images with captions:

1
<figure>
2
  <img src="architecture.jpg" alt="Modern building with glass facade">
3
  <figcaption>Downtown office building designed by Studio X</figcaption>
4
</figure>

<figure> can also contain code blocks, diagrams, or multiple images:

1
<figure>
2
  <pre><code>console.log("Hello!");</code></pre>
3
  <figcaption>Figure 1: JavaScript hello world example</figcaption>
4
</figure>

Lazy Loading

Defer loading off-screen images until the user scrolls near them:

1
<img src="large-photo.jpg" alt="Description" loading="lazy">

• loading="lazy" — loads when near the viewport (saves bandwidth)
• loading="eager" — loads immediately (default)
• Lazy load all images below the fold, but never lazy load the hero image

Video: <video> Element

1
<video controls width="640" height="360">
2
  <source src="movie.mp4" type="video/mp4">
3
  <source src="movie.webm" type="video/webm">
4
  <p>Your browser does not support video. <a href="movie.mp4">Download the video</a>.</p>
5
</video>

Video Attributes

1
<!-- Autoplay example (muted required by browsers) -->
2
<video autoplay muted loop poster="thumbnail.jpg">
3
  <source src="background.mp4" type="video/mp4">
4
</video>

Audio: <audio> Element

1
<audio controls>
2
  <source src="song.mp3" type="audio/mpeg">
3
  <source src="song.ogg" type="audio/ogg">
4
  <p>Your browser does not support audio. <a href="song.mp3">Download the podcast</a>.</p>
5
</audio>

Audio attributes mirror video: controls, autoplay, muted, loop, preload.

Embedding YouTube Videos

1
<iframe
2
  width="560"
3
  height="315"
4
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
5
  title="YouTube video player"
6
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope"
7
  allowfullscreen
8
></iframe>

Replace the video ID (dQw4w9WgXcQ) with your target video’s ID from its URL.

Try It Yourself

Create a page with:

1. A hero banner image with descriptive alt text (use a free stock photo URL)
2. A <figure> with an image and <figcaption> caption
3. A responsive image using srcset with at least 3 sizes
4. A video element with controls and multiple source formats
5. An audio player with controls and a fallback message
6. A YouTube embed iframe

Key Takeaways

• Always provide alt text — informative images get descriptions, decorative images get alt=""
• Use modern formats (WebP, AVIF) with <picture> for fallback
• srcset + sizes delivers the right image size for each device — saves bandwidth
• Always specify width and height on images to prevent layout shifts
• Use loading="lazy" on images below the fold to improve initial page load
• Provide multiple source formats for video (MP4 + WebM) and audio (MP3 + OGG)
• Include fallback content between opening and closing <video>/<audio> tags