Images
Add images with img. Always include a descriptive alt attribute for accessibility and SEO. Set width and height attributes to prevent layout shift. Use loading='lazy' for images that start below the visible area.
Images <!-- Basic image -->
<img src="photo.jpg" alt="A beautiful photo" width="800" height="600">
<!-- Lazy loading -->
<img src="hero.jpg" alt="Hero" loading="lazy">
<!-- Responsive image -->
<picture>
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="Photo">
</picture>Always write descriptive alt text for accessibility.
Test your understanding before moving on
1. The alt attribute is for:
A. Image title
B. Alternative text for accessibility and when image fails
C. SEO only
D. Caption
💡 alt text describes the image for screen readers and appears when the image fails to load.
2. Which loading value defers offscreen images?
A. async
B. defer
C. lazy
D. slow
💡 loading="lazy" defers loading until the image is near the viewport.
3. Which element provides multiple format options?
A. <img>
B. <media>
C. <picture>
D. <source>
💡 <picture> with <source> elements provides multiple format/resolution options.
4. What should alt be for decorative images?
A. "decorative"
B. nothing
C. alt="" (empty string)
D. omit alt
💡 Decorative images should have alt="" so screen readers skip them.
5. Why set explicit width and height on images?
A. For styling
B. Prevents layout shift (CLS) while image loads
C. Required by HTML5
D. For lazy loading
💡 Setting width and height reserves space and prevents Cumulative Layout Shift.