Layout shift: with and without width and height
Both images start with no file. 640×360 at 320px wide is 180px tall, and that space is saved before the image arrives. Watch the second paragraph jump.
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.Expected console output
Space saved for the sized image: 180px
Text under the sized image moved: false
Text under the unsized image moved: true