Day 4: Images and Media

What You'll Learn Today

Embedding and optimizing images
Responsive images
Embedding audio and video
Using iframes for external content

Image Basics

The `<img>` Element

<img src="photo.jpg" alt="Description of the photo">

Required Attributes

Attribute	Description	Required
`src`	Image path or URL	Yes
`alt`	Alternative text	Yes

Optional Attributes

Attribute	Description	Example
`width`	Width in pixels	`width="300"`
`height`	Height in pixels	`height="200"`
`loading`	Lazy loading	`loading="lazy"`
`decoding`	Decoding mode	`decoding="async"`

<img
    src="images/hero.jpg"
    alt="Sunset over the coastline"
    width="800"
    height="600"
    loading="lazy"
>

Important: Specifying width and height lets the browser reserve space before the image loads, preventing layout shift (CLS).

The Importance of alt Text

flowchart TB
    subgraph Alt["Roles of the alt Attribute"]
        A1["🔇 Screen Readers<br>Convey content to visually impaired users"]
        A2["🖼️ Image Errors<br>Display fallback text"]
        A3["🔍 SEO<br>Help search engines understand images"]
    end
    style A1 fill:#3b82f6,color:#fff
    style A2 fill:#f59e0b,color:#fff
    style A3 fill:#22c55e,color:#fff

Scenario	alt text	Example
Meaningful image	Describe the content	`alt="A cat napping on a windowsill"`
Decorative image	Empty alt	`alt=""`
Chart or graph	Describe the data	`alt="Sales up 120% year-over-year"`
Logo	Company name	`alt="Acme Corporation"`

Image Formats

Format	Extension	Best For
JPEG	.jpg	Photos, complex images
PNG	.png	Logos, screenshots (transparency)
GIF	.gif	Simple animations
SVG	.svg	Icons, logos (vector)
WebP	.webp	General purpose (modern)
AVIF	.avif	General purpose (newest)

`<figure>` and `<figcaption>`

<figure>
    <img src="chart.png" alt="Monthly sales chart for 2025">
    <figcaption>Figure 1: Monthly Sales in 2025</figcaption>
</figure>

Responsive Images

The `<picture>` Element

<picture>
    <source media="(min-width: 800px)" srcset="hero-large.webp" type="image/webp">
    <source media="(min-width: 800px)" srcset="hero-large.jpg">
    <source srcset="hero-small.webp" type="image/webp">
    <img src="hero-small.jpg" alt="Hero image">
</picture>

`srcset` and `sizes`

<img
    src="photo-400.jpg"
    srcset="photo-400.jpg 400w,
            photo-800.jpg 800w,
            photo-1200.jpg 1200w"
    sizes="(max-width: 600px) 100vw,
           (max-width: 1200px) 50vw,
           33vw"
    alt="Responsive image example"
>

Audio (`<audio>`)

<audio controls>
    <source src="music.mp3" type="audio/mpeg">
    <source src="music.ogg" type="audio/ogg">
    <p>Your browser does not support audio playback.</p>
</audio>

Attribute	Description
`controls`	Show playback controls
`autoplay`	Auto-play (discouraged)
`loop`	Loop playback
`muted`	Start muted
`preload`	`none` / `metadata` / `auto`

Video (`<video>`)

<video controls width="640" height="360" poster="thumbnail.jpg" preload="metadata">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <p>Your browser does not support video playback.</p>
</video>

Attribute	Description
`controls`	Playback controls
`poster`	Thumbnail before playback
`autoplay`	Auto-play (requires muted)
`playsinline`	Inline playback (for iOS)

iframe

<!-- YouTube video -->
<iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="Video title"
    allowfullscreen
></iframe>

Security: Use the sandbox attribute on <iframe> to restrict embedded content permissions.

Practice: Photo Gallery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Photo Gallery</title>
</head>
<body>
    <h1>Photo Gallery</h1>

    <figure>
        <img src="images/sunset.jpg" alt="Sunset over the ocean" width="600" height="400" loading="lazy">
        <figcaption>Ocean sunset — Summer 2025</figcaption>
    </figure>

    <figure>
        <img src="images/mountain.jpg" alt="Snow-capped mountain peak" width="600" height="400" loading="lazy">
        <figcaption>Mount Fuji in winter</figcaption>
    </figure>

    <h2>Featured Video</h2>
    <video controls poster="images/video-thumb.jpg" width="600">
        <source src="videos/travel.mp4" type="video/mp4">
        <p>Your browser does not support video.</p>
    </video>
</body>
</html>

Summary

Concept	Description
`<img>`	Embed images
`alt`	Alternative text (required)
`<figure>` / `<figcaption>`	Image with caption
`<picture>`	Responsive images
`<audio>`	Embed audio
`<video>`	Embed video
`<iframe>`	Embed external content

Key Takeaways

Always provide alt text (accessibility and SEO)
Specify width/height to prevent layout shift
Use modern formats like WebP/AVIF
Use loading="lazy" for deferred loading

Exercises

Exercise 1: Basic

Create a gallery page with 3+ images, each with <figure> and <figcaption>.

Exercise 2: Intermediate

Use <picture> to serve different images based on screen size.

Challenge

Embed a YouTube video with <iframe> and add descriptive text above and below it.

References

Next up: In Day 5, you'll learn about "Lists and Tables"—organizing data for display.