Lazy images load as you scroll
Image 1 loads at once. The lazy ones load only when you scroll within about one or two screens of them, so their order and timing depend on you.
Give every image a width and height so the page doesn't jump, lazy-load the ones below the fold, raise the priority of the main image, and use modern formats so fewer bytes travel.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a gallery image beach.jpg (1600×1067) that sits far down the page and must not cause layout shift.
Write the hero image hero.jpg (1920×800) for the top of a landing page so that it loads as early as possible.
Explain it without notes
What is layout shift, and how do width and height attributes prevent it while still allowing a fluid image?
Which images should be lazy-loaded and which should not? Why?
What does fetchpriority="high" do, and where should you use it?
How would you cut the bytes of a page full of product photos?
Preview
Console
Nothing logged yet.