Skip to main content

Practice ยท 2 of 3

Spec an Image from Requirements

A product card image renders at 300px on phones (100vw) and 300px inside a 3-column grid on desktop (30vw). Author the <img>: srcset with at least three w-descriptor candidates (300w/600w/900w), a correct sizes attribute reflecting those two conditions, width="900" height="600", alt, and decoding="async". Then add a below-the-fold illustration img with loading="lazy" and its own alt.

Difficulty: advanced

Back to lesson: Practice: Responsive Media โ€” Practice