Lesson 5: Images and Media

Working with Images and Media

⏱️ 30 minutes

Visual content makes websites engaging and memorable. Learn to add images, videos, and other multimedia elements that enhance user experience while maintaining accessibility and performance.

🎯 Learning Objectives

Add images with proper attributes and accessibility
Create responsive images for different screen sizes
Embed audio and video content
Understand image formats and optimization
Implement lazy loading for better performance
Follow media accessibility best practices

HTML Images

💡 The Image Element

The <img> element embeds images in web pages. It's a self-closing tag that requires the src attribute to specify the image source.

Basic Image Syntax

<img src="image.jpg" alt="Description of the image">
<img src="photos/sunset.png" alt="Beautiful sunset over the ocean">
<img src="https://example.com/logo.svg" alt="Company logo">

Essential Image Attributes

src

Source Path

Required: URL or file path to the image

alt

Alternative Text

Required: Description for accessibility

width/height

Dimensions

Optional: Control image size

Image with All Attributes

<img 
    src="photos/team-meeting.jpg" 
    alt="Team members collaborating in a modern office space"
    width="600" 
    height="400"
    title="Our team at work"
    loading="lazy"
>

Image Formats Guide

📸 JPEG (.jpg)

Best for photographs
Good compression
Lossy format
No transparency

🎨 PNG (.png)

Best for graphics with transparency
Lossless compression
Supports transparency
Larger file sizes

📊 SVG (.svg)

Vector graphics (scalable)
Perfect for icons/logos
Small file sizes
Can be styled with CSS

🚀 WebP (.webp)

Modern format, smaller files
Better compression than JPEG
Supports transparency
Not supported in older browsers

Responsive Images

Responsive images adapt to different screen sizes and device capabilities for optimal performance and user experience.

Using the Picture Element

Picture Element for Different Formats

<picture>
    <source srcset="image.webp" type="image/webp">
    <source srcset="image.jpg" type="image/jpeg">
    <img src="image.jpg" alt="Fallback image description">
</picture>

Responsive Images with Srcset

Different Sizes for Different Screens

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

Art Direction with Picture

Different Images for Different Screen Sizes

<picture>
    <source media="(max-width: 600px)" srcset="mobile-hero.jpg">
    <source media="(max-width: 1024px)" srcset="tablet-hero.jpg">
    <img src="desktop-hero.jpg" alt="Hero image adapting to screen size">
</picture>

Audio and Video Elements

HTML5 Video

Video Implementation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Media Elements Demo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: #f5f5f5;
        }
        .media-container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            margin: 20px 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        video, audio {
            width: 100%;
            max-width: 600px;
        }
        .image-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin: 20px 0;
        }
        .image-card {
            text-align: center;
            padding: 15px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .image-card img {
            width: 100%;
            height: 150px;
            object-fit: cover;
            border-radius: 4px;
        }
        figcaption {
            margin-top: 10px;
            font-style: italic;
            color: #666;
        }
    </style>
</head>
<body>
    <h1>📸 Media Gallery Demo</h1>
    
    <!-- Image Gallery -->
    <section class="media-container">
        <h2>Image Gallery</h2>
        <div class="image-gallery">
            <figure class="image-card">
                <img src="https://picsum.photos/300/200?random=1" 
                     alt="Random landscape photo"
                     loading="lazy">
                <figcaption>Beautiful Landscape</figcaption>
            </figure>
            
            <figure class="image-card">
                <img src="https://picsum.photos/300/200?random=2" 
                     alt="Random nature photo"
                     loading="lazy">
                <figcaption>Nature Photography</figcaption>
            </figure>
            
            <figure class="image-card">
                <img src="https://picsum.photos/300/200?random=3" 
                     alt="Random architecture photo"
                     loading="lazy">
                <figcaption>Modern Architecture</figcaption>
            </figure>
        </div>
    </section>
    
    <!-- Video Section -->
    <section class="media-container">
        <h2>HTML5 Video</h2>
        <video controls poster="https://picsum.photos/600/300?random=4">
            <source src="sample-video.mp4" type="video/mp4">
            <source src="sample-video.webm" type="video/webm">
            <p>Your browser doesn't support HTML5 video. 
               <a href="sample-video.mp4">Download the video</a> instead.</p>
        </video>
        
        <p><strong>Video Features:</strong></p>
        <ul>
            <li>Native browser controls (play, pause, volume)</li>
            <li>Multiple format support for compatibility</li>
            <li>Poster image shown before playback</li>
            <li>Fallback content for unsupported browsers</li>
        </ul>
    </section>
    
    <!-- Audio Section -->
    <section class="media-container">
        <h2>HTML5 Audio</h2>
        <audio controls>
            <source src="sample-audio.mp3" type="audio/mp3">
            <source src="sample-audio.ogg" type="audio/ogg">
            <p>Your browser doesn't support HTML5 audio. 
               <a href="sample-audio.mp3">Download the audio</a> instead.</p>
        </audio>
        
        <p><strong>Audio Features:</strong></p>
        <ul>
            <li>Compact audio player controls</li>
            <li>Multiple format support (MP3, OGG, WAV)</li>
            <li>Accessible keyboard navigation</li>
            <li>No plugins required</li>
        </ul>
    </section>
    
    <!-- Responsive Picture Element -->
    <section class="media-container">
        <h2>Responsive Images</h2>
        <picture>
            <source media="(max-width: 600px)" 
                    srcset="https://picsum.photos/400/200?random=5">
            <source media="(max-width: 1000px)" 
                    srcset="https://picsum.photos/600/300?random=5">
            <img src="https://picsum.photos/800/400?random=5" 
                 alt="Responsive image that changes based on screen size"
                 style="width: 100%; height: auto;">
        </picture>
        
        <p>💡 <em>This image adapts to different screen sizes using the picture element.</em></p>
    </section>
    
    <!-- SVG Example -->
    <section class="media-container">
        <h2>Inline SVG Graphics</h2>
        <svg width="200" height="200" viewBox="0 0 200 200">
            <circle cx="100" cy="100" r="80" fill="#3b82f6" fill-opacity="0.3"></circle>
            <circle cx="100" cy="100" r="60" fill="#3b82f6" fill-opacity="0.6"></circle>
            <circle cx="100" cy="100" r="40" fill="#3b82f6"></circle>
            <text x="100" y="105" text-anchor="middle" fill="white" font-size="14">SVG</text>
        </svg>
        
        <p><strong>SVG Benefits:</strong> Scalable, small file size, can be styled with CSS</p>
    </section>
</body>
</html>

Video Attributes

controls

Player Controls

Show play/pause, volume, progress bar

poster

Preview Image

Image shown before video plays

autoplay

Auto Play

Start playing automatically (use carefully)

Audio Element

Audio with Multiple Sources

<audio controls preload="metadata">
    <source src="audio/song.mp3" type="audio/mp3">
    <source src="audio/song.ogg" type="audio/ogg">
    <source src="audio/song.wav" type="audio/wav">
    <p>Your browser doesn't support HTML5 audio. 
       <a href="audio/song.mp3">Download the audio file</a>.</p>
</audio>

Media Accessibility

Alt Text Best Practices

✅ Good Alt Text

"Team meeting in conference room"
"Red sports car parked in driveway"
"Chart showing 25% sales increase"
"" (empty for decorative images)

❌ Poor Alt Text

"Image" or "Photo"
"DSC_001234.jpg"
"Click here to see image"
Very long descriptions

Figure and Figcaption

Semantic Image Markup

<figure>
    <img src="chart.png" alt="Sales data visualization">
    <figcaption>
        Sales increased by 25% in Q3 2024 compared to the previous quarter
    </figcaption>
</figure>

Video Accessibility

Accessible Video with Captions

<video controls>
    <source src="video.mp4" type="video/mp4">
    <track kind="captions" 
           src="captions-en.vtt" 
           srclang="en" 
           label="English captions">
    <track kind="subtitles" 
           src="subtitles-es.vtt" 
           srclang="es" 
           label="Spanish subtitles">
</video>

Performance Optimization

Lazy Loading

Native Lazy Loading

<!-- Images load only when needed -->
<img src="image1.jpg" alt="Description" loading="lazy">
<img src="image2.jpg" alt="Description" loading="lazy">
<img src="hero-image.jpg" alt="Description" loading="eager">

Image Optimization Checklist

🚀 Performance Tips

Choose the right format: JPEG for photos, PNG for graphics, SVG for icons
Compress images: Use tools like TinyPNG or ImageOptim
Use appropriate dimensions: Don't load huge images for small displays
Implement lazy loading: Improve initial page load times
Consider WebP format: Better compression for modern browsers
Use CDNs: Faster delivery through geographically distributed servers

Practice Exercises

Exercise 1: Photo Gallery

Create a responsive photo gallery:

Grid layout with 6 images
Proper alt text for each image
Lazy loading implementation
Figure and figcaption elements

Exercise 2: Media Portfolio

Build a multimedia portfolio page:

Mix of images, video, and audio
Responsive image implementation
Video with multiple format support
Accessible media descriptions

Lesson Summary

🎯 What You Learned

Image elements require src and alt attributes
Responsive images adapt to different screens
HTML5 supports native audio and video
Accessibility makes media usable for everyone
Optimization improves performance and UX

📁 Image Formats

JPEG: Photographs, lossy compression
PNG: Graphics with transparency
SVG: Scalable vector graphics
WebP: Modern format, better compression

⚡ Performance

Use loading="lazy" for images below the fold
Provide multiple formats with picture element
Optimize file sizes before uploading
Use appropriate dimensions
Consider using a CDN

🎉 Media Master!

You now know how to enrich your web pages with images, videos, and multimedia content while maintaining accessibility and performance!

Next: Lists and Tables →