HTML Images & Media: Complete Guide

Images: The <img> Element

Basic Image Syntax:

html

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

Essential Attributes:

Complete Image Examples:

html

<!-- Basic image -->
<img src="profile.jpg" alt="User profile picture">

<!-- Image with dimensions -->
<img src="banner.jpg" alt="Website banner" width="1200" height="300">

<!-- Image from external URL -->
<img src="https://example.com/image.png" alt="External image">

<!-- Image with hover tooltip -->
<img src="product.jpg" alt="Red sports car" title="2024 Model - Click for details">

<!-- Lazy-loaded image (loads when visible) -->
<img src="large-image.jpg" alt="Large landscape" loading="lazy">

<!-- Image in a paragraph -->
<p>
    Here is a beautiful landscape:
    <img src="landscape.jpg" alt="Mountains with sunset" width="600">
</p>

Alt Text: The Most Important Attribute

Why Alt Text Matters:

1. Accessibility: Screen readers read this to visually impaired users

2. SEO: Search engines use it to understand image content

3. Fallback: Displays if image fails to load

4. Context: Helps all users understand image purpose

Good vs Bad Alt Text:

html

<!-- BAD: Missing alt -->
<img src="chart.jpg">

<!-- BAD: Unhelpful alt -->
<img src="chart.jpg" alt="image">
<img src="chart.jpg" alt="chart">
<img src="chart.jpg" alt="picture of something">

<!-- BAD: Keyword stuffing -->
<img src="product.jpg" alt="buy cheap shoes online discount sale footwear">

<!-- GOOD: Descriptive and contextual -->
<img src="chart.jpg" alt="Bar chart showing sales growth from 2020-2023">

<!-- GOOD: Functional images -->
<a href="/cart">
    <img src="cart-icon.png" alt="Shopping cart (3 items)">
</a>

<!-- GOOD: Decorative images (empty alt) -->
<img src="divider.png" alt="">

Alt Text Guidelines:

html

<!-- Descriptive -->
<img src="cat.jpg" alt="Gray tabby cat sleeping on a windowsill">

<!-- Functional (in links/buttons) -->
<a href="/submit">
    <img src="submit-button.png" alt="Submit form">
</a>

<!-- Complex images -->
<img src="infographic.jpg" alt="Infographic: 5 steps to reduce plastic waste. Step 1: Use reusable bags. Step 2: Avoid single-use bottles...">

<!-- Decorative images -->
<img src="border.png" alt="">
<img src="background-pattern.jpg" alt="" role="presentation">

<!-- Images with text -->
<img src="logo.png" alt="Acme Corporation">

Responsive Images

Using srcset and sizes:

html

<!-- Different resolutions for different screens -->
<img src="small.jpg"
     srcset="small.jpg 400w,
             medium.jpg 800w,
             large.jpg 1200w"
     sizes="(max-width: 600px) 400px,
            (max-width: 1200px) 800px,
            1200px"
     alt="Responsive image example">

<!-- Different pixel densities (Retina displays) -->
<img src="image.jpg"
     srcset="image@2x.jpg 2x,
             image@3x.jpg 3x"
     alt="High resolution image">

Picture Element for Art Direction:

html

<picture>
    <!-- Different images for different screen sizes -->
    <source media="(min-width: 1200px)" srcset="large.jpg">
    <source media="(min-width: 768px)" srcset="medium.jpg">
    <!-- Fallback -->
    <img src="small.jpg" alt="A beautiful landscape">
</picture>

<picture>
    <!-- Different formats with fallbacks -->
    <source srcset="image.avif" type="image/avif">
    <source srcset="image.webp" type="image/webp">
    <img src="image.jpg" alt="Modern image format example">
</picture>

Image Best Practices

1. Optimize Images Before Upload

html

<!-- Use correct format -->
<img src="photo.webp" alt="Optimized WebP image">  <!-- Modern -->
<img src="diagram.png" alt="Chart with transparency">  <!-- Graphics -->
<img src="photo.jpg" alt="Photograph">  <!-- Photos -->
<img src="icon.svg" alt="Logo">  <!-- Icons/Logos -->

2. Proper Sizing

html

<!-- Set actual dimensions to prevent layout shift -->
<img src="product.jpg" alt="Product photo" width="400" height="300">

<!-- Or use CSS for responsive sizing -->
<style>
    .responsive-img {
        max-width: 100%;
        height: auto;
    }
</style>

<img src="banner.jpg" alt="Banner" class="responsive-img">

3. Accessibility Considerations

html

<!-- Decorative images -->
<img src="decorative-line.png" alt="" role="presentation">

<!-- Complex images need long descriptions -->
<img src="flowchart.jpg" alt="Project workflow diagram" 
     longdesc="flowchart-description.html">

<!-- Or use aria-describedby -->
<img src="chart.jpg" alt="Sales data visualization"
     aria-describedby="chart-desc">
<p id="chart-desc">This bar chart shows Q1 2024 sales by region...</p>

<!-- Image in button -->
<button>
    <img src="print-icon.png" alt="Print document">
    Print
</button>

Audio: The <audio> Element

Basic Audio Player:

html

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Your browser does not support the audio element.
</audio>

Complete Audio Examples:

html

<!-- Basic with controls -->
<audio controls>
    <source src="song.mp3" type="audio/mpeg">
    Your browser doesn't support audio.
</audio>

<!-- With multiple sources (fallbacks) -->
<audio controls>
    <source src="audio.ogg" type="audio/ogg">
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.wav" type="audio/wav">
    Download <a href="audio.mp3">MP3</a> instead.
</audio>

<!-- With additional attributes -->
<audio controls 
       src="podcast.mp3"
       preload="metadata"
       loop
       muted>
    <p>Listen to our latest podcast episode.</p>
</audio>

<!-- Audio without controls (background) -->
<audio id="bg-music" loop>
    <source src="background.mp3" type="audio/mpeg">
</audio>
<button onclick="document.getElementById('bg-music').play()">
    Play Background Music
</button>

Audio Attributes:

Video: The <video> Element

Basic Video Player:

html

<video controls width="640">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    Your browser does not support the video tag.
</video>

Complete Video Examples:

html

<!-- Basic video with controls -->
<video controls width="800" height="450">
    <source src="movie.mp4" type="video/mp4">
    Your browser doesn't support HTML5 video.
</video>

<!-- Video with poster and tracks -->
<video controls
       width="800"
       poster="thumbnail.jpg"
       preload="metadata">
    <source src="tutorial.mp4" type="video/mp4">
    <source src="tutorial.webm" type="video/webm">
    
    <!-- Captions/subtitles -->
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English">
    <track kind="captions" src="captions_es.vtt" srclang="es" label="Spanish">
    
    <!-- Chapters -->
    <track kind="chapters" src="chapters.vtt" srclang="en">
    
    <!-- Fallback content -->
    <p>Download the <a href="tutorial.mp4">video file</a>.</p>
</video>

<!-- Video with autoplay and muted (common for hero sections) -->
<video autoplay muted loop playsinline>
    <source src="background-video.mp4" type="video/mp4">
</video>

<!-- Responsive video container -->
<div class="video-container">
    <video controls style="width: 100%; height: auto;">
        <source src="presentation.mp4" type="video/mp4">
    </video>
</div>

Video Attributes:

Accessibility for Media

Images Accessibility:

html

<!-- Descriptive alt text -->
<img src="chart.jpg" alt="Sales increased 30% in Q4 2023">

<!-- Complex image with description -->
<figure>
    <img src="infographic.jpg" alt="Infographic about climate change">
    <figcaption>
        Figure 1: Impact of climate change on polar ice caps
    </figcaption>
</figure>

<!-- Image in link with proper alt -->
<a href="/products">
    <img src="product-category.jpg" alt="Browse all products">
</a>

<!-- Decorative image with empty alt -->
<img src="decorative-line.jpg" alt="" role="presentation">

Video/Audio Accessibility:

html

<video controls>
    <source src="lecture.mp4" type="video/mp4">
    
    <!-- Subtitles for deaf/hard of hearing -->
    <track kind="subtitles" src="lecture_en.vtt" srclang="en" label="English" default>
    <track kind="subtitles" src="lecture_es.vtt" srclang="es" label="Español">
    
    <!-- Captions (includes sound descriptions) -->
    <track kind="captions" src="lecture_captions.vtt" srclang="en" label="English Captions">
    
    <!-- Audio descriptions for blind users -->
    <track kind="descriptions" src="lecture_descriptions.vtt" srclang="en">
    
    <!-- Chapters for navigation -->
    <track kind="chapters" src="lecture_chapters.vtt" srclang="en">
    
    <p>
        Watch the lecture on HTML5. 
        <a href="transcript.txt">Read transcript</a>.
    </p>
</video>

ARIA Labels for Enhanced Accessibility:

html

<!-- Image with ARIA label -->
<img src="icon-help.png" 
     alt=""
     aria-label="Help and support">

<!-- Video with ARIA description -->
<video controls aria-describedby="video-desc">
    <source src="tutorial.mp4" type="video/mp4">
</video>
<p id="video-desc">
    A 5-minute tutorial on creating accessible HTML content.
</p>

<!-- Audio player with ARIA labels -->
<audio controls 
       aria-label="Podcast: Web Development Trends">
    <source src="podcast.mp3" type="audio/mpeg">
</audio>

Complete Example: Media-Rich Article

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Media Elements Tutorial</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; }
        .media-container { margin: 20px 0; }
        img { max-width: 100%; height: auto; }
        video { max-width: 100%; }
        figure { margin: 20px 0; text-align: center; }
        figcaption { font-style: italic; color: #666; }
    </style>
</head>
<body>
    <article>
        <header>
            <h1>Understanding Web Media</h1>
            <p>A guide to images, audio, and video in HTML</p>
        </header>

        <section>
            <h2>Responsive Images</h2>
            
            <figure>
                <picture>
                    <source media="(min-width: 1200px)" srcset="landscape-large.jpg">
                    <source media="(min-width: 768px)" srcset="landscape-medium.jpg">
                    <img src="landscape-small.jpg" 
                         alt="Panoramic view of mountains at sunrise with pink clouds">
                </picture>
                <figcaption>Figure 1: Responsive landscape image</figcaption>
            </figure>
            
            <p>
                This image uses the <code>&lt;picture&gt;</code> element to serve 
                different sizes based on screen width.
            </p>
        </section>

        <section>
            <h2>Audio Content</h2>
            
            <div class="media-container">
                <audio controls preload="metadata">
                    <source src="podcast-episode.mp3" type="audio/mpeg">
                    <source src="podcast-episode.ogg" type="audio/ogg">
                    <p>
                        Listen to our podcast about web accessibility.
                        <a href="podcast-episode.mp3">Download MP3</a>
                    </p>
                </audio>
            </div>
            
            <p>
                The audio player includes multiple formats for browser compatibility.
            </p>
        </section>

        <section>
            <h2>Accessible Video</h2>
            
            <div class="media-container">
                <video controls width="800" poster="video-thumbnail.jpg">
                    <source src="tutorial.mp4" type="video/mp4">
                    <source src="tutorial.webm" type="video/webm">
                    
                    <!-- Accessibility tracks -->
                    <track kind="subtitles" src="tutorial-en.vtt" srclang="en" label="English" default>
                    <track kind="captions" src="tutorial-en-cc.vtt" srclang="en" label="English (CC)">
                    
                    <p>
                        Watch our HTML tutorial video.
                        <a href="transcript.txt">Read transcript</a>.
                    </p>
                </video>
            </div>
            
            <figure>
                <img src="accessibility-icon.png" 
                     alt="Accessibility icon showing a person in a circle"
                     width="100" height="100">
                <figcaption>Figure 2: Always include accessibility features</figcaption>
            </figure>
        </section>

        <section>
            <h2>Image Gallery Example</h2>
            
            <div style="display: flex; gap: 10px; flex-wrap: wrap;">
                <figure>
                    <img src="product1-thumb.jpg" 
                         alt="Wireless headphones - Black"
                         width="200" height="200">
                    <figcaption>Wireless Headphones</figcaption>
                </figure>
                
                <figure>
                    <img src="product2-thumb.jpg" 
                         alt="Smart watch with fitness tracking"
                         width="200" height="200">
                    <figcaption>Smart Watch</figcaption>
                </figure>
                
                <figure>
                    <img src="product3-thumb.jpg" 
                         alt="Bluetooth speaker - Waterproof"
                         width="200" height="200">
                    <figcaption>Bluetooth Speaker</figcaption>
                </figure>
            </div>
        </section>

        <footer>
            <hr>
            <p><small>All media used with proper attribution and alt text.</small></p>
            <img src="footer-logo.png" alt="WebDev Academy Logo" width="150">
        </footer>
    </article>
</body>
</html>

Performance & Best Practices

1. Optimize Media Files

html

<!-- Compress images -->
<img src="photo-optimized.jpg" alt="Optimized photo">

<!-- Use modern formats -->
<picture>
    <source srcset="image.avif" type="image/avif">
    <source srcset="image.webp" type="image/webp">
    <img src="image.jpg" alt="Modern format fallback">
</picture>

<!-- Lazy load images below the fold -->
<img src="image.jpg" alt="Content image" loading="lazy">

<!-- Specify dimensions to prevent layout shift -->
<img src="banner.jpg" alt="Banner" width="1200" height="400">

2. Responsive Media

html

<!-- Responsive images -->
<img src="responsive.jpg" 
     srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1600w"
     sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
     alt="Fully responsive image">

<!-- Responsive video -->
<video controls style="width: 100%; max-width: 800px; height: auto;">
    <source src="video.mp4" type="video/mp4">
</video>

3. Accessibility Checklist

html

<!-- Images -->
✓ <img src="photo.jpg" alt="Descriptive text">
✓ <img src="icon.png" alt="" role="presentation"> <!-- decorative -->
✓ <img src="chart.jpg" alt="" aria-labelledby="chart-desc">

<!-- Video -->
✓ <video controls>
✓   <track kind="subtitles" src="subs.vtt" srclang="en">
✓   <p>Transcript available</p>
✓ </video>

<!-- Audio -->
✓ <audio controls>
✓   <source src="audio.mp3" type="audio/mpeg">
✓   <p>Download link provided</p>
✓ </audio>

Common Pitfalls to Avoid

html

<!-- DON'T: Forget alt text -->
<img src="important.jpg">  <!-- BAD -->

<!-- DON'T: Use images for text -->
<img src="welcome-text.png" alt="Welcome to our website">  <!-- BAD -->
<h1>Welcome to our website</h1>  <!-- GOOD -->

<!-- DON'T: Auto-play audio/video with sound -->
<audio controls autoplay>  <!-- ANNOYING -->
<video autoplay muted>  <!-- ACCEPTABLE for background video -->

<!-- DON'T: Use incorrect aspect ratio -->
<img src="photo.jpg" width="400" height="200" 
     style="width: 200px; height: 200px;">  <!-- DISTORTED -->

<!-- DON'T: Use huge uncompressed files -->
<img src="10mb-photo.png" alt="Large file slows page">  <!-- BAD -->

Quick Reference Card

Images:

html

<img src="file.jpg" alt="description" width="X" height="Y">
<img src="image.jpg" alt="" role="presentation"> <!-- decorative -->
<picture>
    <source srcset="image.webp" type="image/webp">
    <img src="image.jpg" alt="fallback">
</picture>

Audio:

html

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    Your browser doesn't support audio.
</audio>

Video:

html

<video controls width="800" poster="thumb.jpg">
    <source src="video.mp4" type="video/mp4">
    <track kind="subtitles" src="subs.vtt" srclang="en">
</video>

Remember: Always include alt text for images, provide transcripts/captions for audio/video, and optimize media files for performance!