Images That Fit the Device
Decide what you would build from the brief alone. Everything below it is available, but the exercise stops working if you open it first.
A product page ships one 2400px-wide hero image and a grid of full-resolution thumbnails. It is slow on phones. Make the images responsive.
Setting max-width: 100% on the images and adding loading="lazy" to all of them. The layout is now correct at every width and the network panel on a fresh load shows far fewer requests, which looks like a decisive win. The phone still downloads the full 2400px hero — CSS scales the rendered box and does not change which bytes were fetched or decoded — and lazy-loading the hero means the largest, most important image now starts loading later than it used to. The visible metric improved because fewer things loaded at once; the thing the user is waiting for got slower.