HTML - Images

Overview

Estimated time: 25–35 minutes

Images are essential for content and UI. Make them accessible, responsive, and performant.

Learning Objectives

• Write <img> with proper alt text.
• Understand intrinsic sizing and responsive patterns.
• Use <picture>/<source> for art direction.

Basics

<img src="/images/cat.jpg" alt="A playful tabby cat" width="400" height="300">

Responsive basics (without CSS)

Use only width to scale proportionally; omit height to preserve aspect ratio.

<img src="/images/cat.jpg" alt="Cat" width="300">

Art direction (picture)

<picture>
  <source srcset="/images/cat-wide.jpg" media="(min-width: 800px)">
  <img src="/images/cat-small.jpg" alt="Cat">
</picture>

Try it

Common Pitfalls

• Decorative images should have empty alt=""; informative images need descriptive alt.
• Hard-coding both width and height that distort aspect ratio.

Checks for Understanding

1. When should alt be empty?
2. What’s the purpose of <picture>?

Exercises

1. Add two images to your page: one informative with descriptive alt, one decorative with empty alt.
2. Create a <picture> that uses a different image on wide screens.