Lazy loading defers images outside the initial view. Images essential to initial content should be available early with reserved dimensions.
Before you start
You should be comfortable with semantic HTML, CSS selectors and browser developer tools. Reproduce the scenario in a small page before adding framework code. Inspect both visual appearance and keyboard or accessibility behavior; a correct screenshot alone is not sufficient evidence.
The practical goal is to reason through this situation: Below-the-fold article illustrations may be lazy; the primary hero image generally should not be. Read the walkthrough first, then try the interview exercise before opening its answer. The important part is explaining the decision and its consequences, rather than remembering a definition alone.
Step-by-step walkthrough
Step 1: Identify initial visible content
Measure the real LCP element and the viewport rather than assuming every image is equally important.
Step 2: Prioritize selectively
Keep the main visible image eager. Defer images that are genuinely outside the initial view.
Step 3: Measure the outcome
Compare visible completion and resource timing, including mobile layout where the initial image may differ.
Worked scenario
Below-the-fold article illustrations may be lazy; the primary hero image generally should not be.
An article’s hero image appears immediately above its opening paragraph, while illustrations are several screens below. Lazily loading the hero can postpone LCP; lazy loading later illustrations saves early bandwidth. Marking every image high priority removes that distinction and can create competition for critical resources.
Common mistake
Lazily loading the likely largest-content image can delay visible completion.
Verify the behavior
Use performance traces with cache disabled. Confirm the main image starts promptly and delayed illustrations do not cause layout shifts.
Interview exercise
Identify the image to prioritize.
Answer and reasoning
Measure the actual initial viewport and LCP element, then prioritize that resource without marking every image high priority.
Continue learning
Compare the scenario with the HTML and CSS interview questions and test your understanding with the HTML and CSS MCQs. For terminology and implementation details, consult the reference material.