Responsive web design
Serving the same HTML at one URL and adapting layout with CSS media queries and flexible units, Google's recommended mobile configuration.
TechnicalResponsive images
srcset and sizes
HTML attributes that offer the browser multiple image candidates at different widths so it can pick the smallest file that fits the layout and screen density.
In full
`srcset` lists candidate URLs with width descriptors, and `sizes` tells the browser how wide the image will render at each breakpoint so it can choose before layout. Getting `sizes` wrong is a common cause of oversized downloads on mobile and therefore of poor LCP. The `<picture>` element extends this with art direction and format fallbacks.
Example
`srcset="p-400.jpg 400w, p-800.jpg 800w, p-1600.jpg 1600w" sizes="(max-width: 600px) 100vw, 50vw"`
Related terms
WebP
A Google-developed image format supporting lossy and lossless compression plus transparency and animation, typically 25-35% smaller than…
AVIF
A modern image format based on the AV1 codec that generally compresses better than WebP, with wide but slightly less universal browser…
Largest Contentful Paint
A Core Web Vital measuring the render time of the largest image, video poster or text block visible in the viewport; good is 2.5 s or less…
Lazy loading
Deferring the download of offscreen images and iframes until they are near the viewport, using the native `loading="lazy"` attribute or…