VOL. III · CH. 3.29 · COMPONENT
Image Galleries
Letting visual content be the primary content, not a decorative afterthought.
1 min read · 110 words
3.29.1Definition & Anatomy
An image gallery displays a curated set of images, typically with a grid overview and an expanded lightbox view for closer inspection.
3.29.2Common Mistakes
- No lazy-loading, forcing every image to load upfront regardless of what's actually viewed.
- Lightbox views with no keyboard navigation or accessible alt text per image.
3.29.3Best Practices
- Lazy-load images outside the initial viewport; serve appropriately sized images per device.
- Support keyboard arrow-key navigation and meaningful alt text in the expanded view.
ExampleReal estate listing galleries lazy-load images as a user scrolls or navigates the lightbox, since loading every photo of every listing upfront would make the page unusably slow.