Responsive Images & aspect-ratio

« Web Icons & Inline SVG« Previous CSS Transitions, Transforms & Micro-Interactions »Next »

Optimize web images using srcset, the picture element, and modern CSS aspect-ratio to eliminate Cumulative Layout Shift (CLS).

Eliminating Layout Shift with aspect-ratio

Before an image downloads, the browser does not know its dimensions, causing page content to jump downward when the image finally renders (CLS). Setting aspect-ratio: 16 / 9; reserves the exact space immediately.

Zero-CLS Responsive Image Container

Try It Yourself »

img.responsive-hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

Google AdSense Slot (inContentBanner)

Set your Publisher ID in src/config/ads.ts to display live ads.

Test Yourself With Exercise

+15 XP

Which modern CSS property reserves space for an image before it downloads to prevent Cumulative Layout Shift (CLS)?

« Previous: Web Icons & Inline SVG Next: CSS Transitions, Transforms & Micro-Interactions »