The loading hints, read back
When you leave decoding or fetchpriority out, the property reports the default, auto. (For a missing loading, browsers disagree on what to report, so this example only asks whether it is lazy.)
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
hero: lazy=false decoding=auto fetchpriority=high
later: lazy=true decoding=async fetchpriority=auto
plain: lazy=false decoding=auto fetchpriority=auto
Aspect ratio from attributes: auto 64 / 36