Module 5: Images & Multimedia

📖 The <img> Tag

The <img> tag embeds images into your web page. Unlike most HTML tags, it is a self-closing tag (it has no closing tag).

Basic Syntax

Essential Attributes

Attribute	Required?	Purpose
`src`	Yes	The image file path or URL
`alt`	Yes (for accessibility)	Text description for screen readers and when image fails to load
`width`	No	Image width in pixels
`height`	No	Image height in pixels
`loading`	No	`lazy` delays loading until image is near viewport

⚠️ Accessibility Law: The alt attribute is not optional for accessible websites. In many countries, missing alt text violates accessibility laws (like ADA in the US). Always describe the image's purpose, not just its appearance.

Good vs. Bad Alt Text

Image	Bad Alt Text	Good Alt Text
Company logo	"Logo"	"Ethioweb.net - Web Development Solutions"
Chart showing sales growth	"Graph"	"Bar chart showing 50% sales growth from 2024 to 2025"
Decorative border	"Blue line"	"" (empty alt for decorative images)

💡 Lazy Loading: Add loading="lazy" to images below the fold (not visible when page first loads). This makes your page load faster: <img src="photo.jpg" alt="..." loading="lazy">

🖼️ Image Formats Explained

Choosing the right image format affects page speed and quality.

Format	Best For	Transparency?	Animation?
JPEG / JPG	Photographs, complex images	No	No
PNG	Graphics, logos, screenshots	Yes	No
SVG	Logos, icons, illustrations	Yes	Yes (via CSS/JS)
WebP	Modern replacement for JPEG/PNG	Yes	Yes
GIF	Simple animations (avoid for photos)	Yes (1-bit)	Yes

💡 Modern Best Practice: Use WebP when possible (30% smaller than JPEG without quality loss). Provide JPEG/PNG fallback for older browsers using the <picture> element.

🎨 Figure and Figcaption

HTML5 introduced <figure> and <figcaption> for self-contained content with captions.

<figure>
    <img src="ethiopian-coffee.jpg"
         alt="Traditional Ethiopian coffee ceremony with jebena pot"
         width="600">
    <figcaption>
        Traditional Ethiopian coffee ceremony, an essential part of Ethiopian culture.
    </figcaption>
</figure>
            

When to Use <figure>

Images with captions
Charts and diagrams
Code snippets
Poems or quotations
Any content that could be moved to an appendix without losing meaning

🎬 Video and Audio

HTML5 allows native video and audio playback without plugins like Flash.

The <video> Tag

<video width="640" height="360" controls poster="thumbnail.jpg">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <p>Your browser does not support HTML5 video. 
        <a href="video.mp4">Download the video</a> instead.
    </p>
</video>
            

Video Attributes

Attribute	Effect
`controls`	Shows play, pause, volume buttons
`autoplay`	Starts playing automatically (often blocked by browsers)
`loop`	Repeats when finished
`muted`	Starts with sound off
`poster`	Image shown before video plays

The <audio> Tag

<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>
            

⚠️ Accessibility: Always provide transcripts or captions for video content. Deaf and hard-of-hearing users cannot access audio information otherwise.

✏️ Exercise 5.1: Create a Photo Gallery

Your Task

Create gallery.html with the following:

A page title "My Photo Gallery"
At least 4 images using <figure> and <figcaption>
Each image must have descriptive alt text
Use placeholder images from picsum.photos:
- https://picsum.photos/400/300?random=1
- https://picsum.photos/400/300?random=2
- Change the number for different images
Add loading="lazy" to images below the first two
Include a link back to your homepage

📝 Module 5 Quiz

🎯 Module Summary

✅ <img> is self-closing: src and alt are essential
✅ Always write meaningful alt text for accessibility
✅ Use <figure> and <figcaption> for captioned images
✅ Choose JPEG for photos, PNG for graphics, SVG for icons, WebP when possible
✅ <video> and <audio> support multiple source formats

← Previous Module Next: Module 6 →