What you'll learn
A wall of text is rarely enough — images and media make pages engaging and clear. This module covers the <img> element, choosing the right file format, making images responsive and accessible, and embedding audio and video. It's the final module of Phase 1.
By the end you'll be able to:
- Add images with proper
alttext and dimensions - Choose the right image format for the job
- Serve responsive images and use
<figure> - Embed
<audio>and<video>
The img element
Images use the void element <img>. Two attributes matter most: src (the file to load) and alt (a text description). Adding width and height lets the browser reserve space before the image loads — preventing content from "jumping" — and loading="lazy" defers off-screen images to speed up the page:
<img
src="images/beach.jpg"
alt="Sunset over a calm beach"
width="600"
height="400"
loading="lazy"
/>Key idea
alt text. It's read aloud to blind users, shown if the image fails to load, and indexed by search engines. Describe the image's purpose ("Sunset over a calm beach"), not "image" or a filename. For purely decorative images, use an empty alt="" so screen readers skip them.Web image formats
Choosing the right format keeps your pages sharp and fast:
| Format | Best for | Notes |
|---|---|---|
JPEG | Photographs | Small files; no transparency |
PNG | Graphics & transparency | Lossless and crisp, but larger |
SVG | Icons & logos | Vector — scales to any size, tiny file |
WebP | Almost everything | Smaller than JPEG/PNG with wide support |
GIF | Simple animation | Legacy; prefer video for anything complex |
Responsive images
Sending a huge desktop image to a phone wastes data. The srcset attribute offers the browser several sizes and lets it pick the best one for the screen. For more control — like a different crop on mobile — the <picture> element chooses a source based on media conditions:
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 800px"
alt="A mountain trail at dawn"
/>Figures & captions
When an image needs a caption, wrap it in <figure> and add a <figcaption>. This semantically ties the caption to the image — better than a plain paragraph underneath:
<figure>
<img src="chart.png" alt="Sales grew 40% in the third quarter" />
<figcaption>Quarterly sales, 2024</figcaption>
</figure>Audio & video
The <video> and <audio> elements embed media with native browser controls. Provide multiple <source> files so different browsers can pick a format they support, and include fallback text for very old browsers. The controlsattribute shows the play/pause UI:
<video controls width="400" poster="preview.jpg">
<source src="clip.mp4" type="video/mp4" />
<source src="clip.webm" type="video/webm" />
Your browser doesn't support embedded video.
</video>
<audio controls>
<source src="song.mp3" type="audio/mpeg" />
</audio>Note
poster attribute to show a preview image before a video plays. Avoid autoplay with sound — it startles users and is blocked by most browsers anyway.Recap & quick check
Key takeaways
- Images use <img> with src (the file) and alt (a text description) — alt is essential for accessibility.
- Set width/height and loading="lazy" to avoid layout shift and speed up the page.
- Pick formats by job: JPEG for photos, PNG for transparency, SVG for icons/logos, WebP for smaller files.
- srcset and <picture> serve the right image size for each screen.
- <figure>/<figcaption> pairs an image with a caption; <video>/<audio> embed media with controls.
Quick check
1. Why is the alt attribute important?
2. Which format is best for a scalable logo?
3. What does loading="lazy" do?
4. Which element pairs an image with a caption?
5. Why provide multiple <source> elements in a <video>?
That completes Phase 1 — you can build a real, content-rich page with text, links, and media! Next, Phase 2 begins with organising content into lists and tables.