picture, aspect-ratio & lazy loading

Images that fit every screen

Lesson 13 of 20 · 11 min · Module 4: Images, themes and motion

Images are usually the heaviest part of a page and a common cause of layout jumps. A few attributes and two CSS properties make them load efficiently, crop nicely and keep their space while they arrive.

Start this lesson →

Free. No installation: you write and run the code in your browser, and it is checked automatically.

By the end, you’ll be able to…

Offer different crops with picture and source
Prevent layout jumps with width and height
Load images efficiently and crop them with CSS

The idea

<picture> with <source media="…" srcset="…"> serves a different crop to wide screens, while the <img> inside stays the fallback. width and height attributes let the browser reserve space before the file loads. loading="lazy" delays images further down the page. In CSS, aspect-ratio fixes the shape and object-fit: cover crops instead of stretching.

<img src="cabin-800.jpg"
     srcset="cabin-400.jpg 400w, cabin-800.jpg 800w, cabin-1600.jpg 1600w"
     sizes="(min-width: 700px) 50vw, 100vw"
     width="800" height="450" alt="A wooden cabin in the snow">

01Two kinds of responsive images

Use picture with media conditions for art direction: a different crop or picture for different screens. Use srcset with widths and sizes when only the resolution should change; the browser then chooses the smallest file that looks sharp.

<img src="cabin-800.jpg"
     srcset="cabin-400.jpg 400w, cabin-800.jpg 800w"
     sizes="(min-width: 700px) 50vw, 100vw" alt="…">

02Reserve the space

With width and height attributes, the browser knows the image’s proportions before it downloads anything, so the text below does not jump when the picture arrives. CSS width: 100% and height: auto still make it fluid.

03Lazy, but not everywhere

loading="lazy" saves data for images further down the page. Never lazy-load the main image at the top of the page: it should start loading as early as possible.

Your turn

1) Wrap the photo in <figure class="photo"> with the caption <figcaption>Bâlea Lake at sunrise</figcaption>. 2) Put the image in a <picture> with <source media="(min-width: 700px)" srcset="…"> using the wide picture provided in the comment. 3) Give the <img> a meaningful alt text, width="800" height="450", loading="lazy" and decoding="async". 4) Style it with .photo img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; }.

What the checks look for

A wide crop is offered to wide screens
The image has a meaningful alt text
Width and height reserve its space
It loads lazily and decodes off the main thread
The caption describes the photo
The photo keeps a 16:9 shape
It is cropped instead of stretched
It fits a phone screen

Try it in the editor →

Take this with you

Good images reserve their space, load when needed and crop gracefully.

Go a little further

Add a second figure higher up the page without loading="lazy" and with fetchpriority="high", as you would for a main image.