Responsive image attributes let the browser choose suitable resources for layout size and pixel density. Sizes should describe the expected rendered width.
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: A card supplies several width candidates and sizes matching its grid breakpoints. 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: Estimate rendered width
Describe how much space the image occupies at each layout breakpoint. This is what sizes communicates.
Step 2: Supply usable candidates
List appropriately sized sources with width descriptors so the browser can consider layout and pixel density.
Step 3: Reserve image space
Provide intrinsic width and height or a suitable aspect ratio to avoid shifting surrounding content on load.
Worked scenario
A card supplies several width candidates and sizes matching its grid breakpoints.
<img src="card-640.jpg" srcset="card-320.jpg 320w, card-640.jpg 640w"
sizes="(max-width: 40rem) 100vw, 320px"
width="640" height="360" alt="Interview study plan">All referenced files must exist. The sizes expression should be refined to account for real page padding rather than blindly assuming a full viewport image.
Common mistake
An inaccurate sizes value can download unnecessarily large images.
Verify the behavior
Inspect selected network resources at different widths and densities. Delay image loading and check that its reserved space remains stable.
Interview exercise
Prevent image layout shifts.
Answer and reasoning
Provide dimensions or an aspect ratio alongside suitable candidates so space exists before the image loads.
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.