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