Images
📌 Covered in this chapter:
Image Element <img> · src & alt Attributes · Width & Height CLS Prevention · Decorative vs Meaningful Alt Text · Native Lazy Loading · <figure> & <figcaption> · Web Image Formats (WebP, AVIF, PNG, SVG)
Welcome to Phase 5 (Chapter 11): Images! Images bring web content to life. In this deep chapter, we explore the
<img> element, accessible alt text rules, explicit width/height dimensioning to prevent Cumulative Layout Shift (CLS), native browser lazy loading (loading="lazy"), figure captions with <figure> and <figcaption>, and web format trade-offs (WebP, AVIF, PNG, JPG, SVG).
1Image Tag Syntax & Cumulative Layout Shift (CLS) Prevention
Always specify explicit width and height attributes on <img> tags to allow the browser layout engine to reserve aspect-ratio space before the image binary finishes downloading over the network, preventing jarring layout jumps (CLS):
HTML — Image with CLS Prevention & Lazy Loading
▶ Run in HTML Editor
<img
src="/logo.png"
alt="Our Compiler Official Platform Logo"
width="240"
height="80"
loading="lazy">2Accessible Alt Text Guidelines
| Image Category | Alt Attribute Rule | Example |
|---|---|---|
| Informative Image | Provide concise description of information conveyed in graphic. | alt="Bar chart showing 40% growth in 2026" |
| Decorative Image | Use empty string alt="" so screen readers skip it. | alt="" |
| Functional Image (Link/Button) | Describe the destination action, not visual features. | alt="Return to Homepage" |
3Figures & Captions (<figure> & <figcaption>)
HTML — Figure with Caption
▶ Run in HTML Editor
<figure style="border:1px solid #f97316; padding:10px; border-radius:8px; display:inline-block;">
<img src="/logo.png" alt="Compiler Architecture Diagram" width="300" height="150">
<figcaption style="font-style:italic; color:#aaa; margin-top:6px;">
Figure 1.1: High-level compiler parsing pipeline architecture.
</figcaption>
</figure>❓ Frequently Asked Questions (FAQ)
Q1: What happens if an image fails to load due to broken link?
The browser displays a broken image icon alongside the specified alt text, preserving accessibility.