Responsive Image
An image implementation that serves different sizes or formats based on the viewer's device, screen size, and connection speed.
Responsive images prevent mobile users from downloading desktop-sized images that waste bandwidth and slow page loads. HTML provides the srcset attribute for resolution switching and the picture element for art direction — serving different crops or formats to different devices. Modern frameworks like Next.js automate responsive image generation, creating multiple sizes from a single source and serving the optimal version based on the viewport. WebP and AVIF formats with JPEG fallback further reduce bandwidth. Responsive images are critical for Core Web Vitals performance — an oversized image delays Largest Contentful Paint, the primary loading performance metric that affects both user experience and search engine rankings.