Images

1. Learning Objectives

In this lesson, you will master the implementation of images. By the end of this topic, you will be able to:

• Embed images using the void <img> element.
• Write descriptive, compliant alt text to maximize accessibility.
• Set explicit sizing attributes (width and height) to prevent Cumulative Layout Shift (CLS).
• Leverage native browser lazy loading (loading="lazy") to optimize page load speeds.
• Use semantic figure wrappers (<figure> and <figcaption>).

2. Overview

Images are embedded in HTML documents using the self-closing (void) <img> element. It does not wrap text content, instead pulling file paths using the src attribute. Additional attributes govern layout dimensions, descriptive fallbacks, and fetch prioritization.

3. Why This Topic Matters

Images make up a major percentage of web page file sizes. Misconfiguring image elements leads to bad performance:

• Cumulative Layout Shift (CLS): If you do not specify image dimensions, the browser cannot allocate layout space before downloading the image file. Once the image loads, page elements jump down suddenly, disrupting the user experience.
• SEO and Screen Reader Failures: Visually impaired users relying on screen readers hear only the filename (e.g. "IMG_88291.jpg") if the alt tag is missing.

4. Real-World Analogy

Think of an HTML image tag like **hanging a framed painting on a wall**:

• The Picture Frame (Explicit width/height): You mark an exact outline on the wall where the painting will hang. Guests won't bump into furniture because the layout is already fixed.
• The Label (Alt Text): A description card placed next to the frame explaining what the painting depicts for visually impaired museum visitors.
• Delivery on Demand (Lazy Loading): Storing paintings in the warehouse and only hanging them on the wall when a visitor approaches that specific room corridor.

5. Core Concepts

6. Syntax & API Reference

Images are self-closing void elements. Declared dimensions inside HTML must be unitless numbers (representing pixels):

Semantic Wrapping (Figure Elements):

To group images with captions, wrap them in a <figure> element:

7. Visual Diagram

This diagram displays how the browser uses explicit sizing attributes to allocate space and prevent page reflows:

8. Live Example — Full Working Code

A sample HTML file showing semantic figure nesting and lazy loading:

9. Interactive Playground

10. Common Mistakes

11. Best Practices

• Always specify dimensions: Set explicit unitless `width` and `height` attributes on HTML image tags. This allows the browser to calculate the aspect ratio and reserve layout space, preventing layout shifts.
• Keep alt text descriptive and concise: Describe the content of the image. Avoid starting with phrases like "image of..." or "photo of..." since screen readers already announce the element as an image.
• Use empty alt tags for decorative elements: If an image is purely decorative (like a divider line or decorative shape), use alt="". This tells screen readers to skip the element entirely.
• Lazy load off-screen images: Set loading="lazy" for images located below the fold to reduce initial page load times and save bandwidth. Do not lazy load the primary hero image at the top of the page.

12. Browser Compatibility

13. Interview Questions

14. Debugging Exercise

15. Practice Exercises

16. Scenario-Based Challenge

17. Quick Quiz

18. Summary & Key Takeaways

• • Specify unitless dimensions to block layout shifts.
• • Write alt description text to pass basic web accessibility checks.

19. Cheat Sheet