mediumperformance
Design an Image Carousel / Photo Gallery
Interview Prep mode active
Interview answer templates and key talking points. Switch the mode in the header to change your experience.
Asked In
InstagramPinterestUnsplashAirbnbGoogle Photos
Key Challenges
- ·Preventing Cumulative Layout Shift (CLS) with skeleton placeholders and intrinsic aspect ratios
- ·Predictive Prefetching: Loading the 'next' and 'previous' images before the user swipes
- ·Memory Management: Virtualizing large galleries to avoid 1GB+ browser heaps on mobile
- ·High-Performance Animations: Using transform/opacity and GPU acceleration for 60fps swiping
- ·Pinch-to-Zoom and Pan: Handling complex touch gestures and boundary constraints
- ·Responsive Delivery: Serving WebP/AVIF based on DPR (Device Pixel Ratio) and bandwidth
- ·Accessibility (WCAG 2.1): Keyboard traps in lightboxes, ARIA live regions for slide changes
Key Takeaways
- ✓Use aspect-ratio CSS or padding-bottom hacks to reserve space and kill CLS.
- ✓Intersection Observer is for lazy loading; requestIdleCallback is for prefetching.
- ✓Always use `srcset` + `sizes` to let the browser choose the optimal resolution.
- ✓Lightbox focus management is critical; use `aria-modal` and trap focus within the portal.
- ✓Transform-based animations (translate3d) avoid re-paints; stay off the main thread.
- ✓For large galleries, unload images that are +/- 5 items away from the viewport.