Separate resolution from composition
A small screen may need fewer image pixels, or it may need a different crop. Those are different requirements. Resolution switching offers several sizes of the same image; art direction changes the composition. Decide which problem you have before adding a picture element and a collection of sources that are difficult to maintain.
Prepare useful source candidates
For a project thumbnail, export a few widths that cover the real layout rather than every possible device dimension. A 480-pixel, 960-pixel and 1440-pixel version might fit a particular design. Inspect each output visually and compress it appropriately. Candidate filenames should make it clear which asset was generated at which width.
Describe the layout honestly
With width-descriptor srcset candidates, sizes tells the browser the image’s expected display width under different conditions. If the card occupies one third of a wide container, declaring that it always fills the viewport can lead to unnecessarily large downloads. Base the sizes expression on the implemented layout, including its maximum width and page padding.
Use picture for intentional art direction
Suppose a desktop hero shows a wide workspace, while the mobile design needs a close crop of the central object. A picture element can select the appropriate source for those conditions, with an img fallback that still carries alt text and dimensions. Keep the meaning consistent even when the visual framing changes.
Do not make every image lazy
Images far below the first screen are good candidates for deferred loading. The main visible hero image often has a different priority. Apply loading behavior according to the image’s role rather than adding lazy loading to every img element through a shared component. Also reserve dimensions so choosing a candidate does not cause the layout to jump.
Inspect what the browser chose
Use the network panel and the image’s currentSrc to see which candidate is actually delivered at each layout width. Test different device pixel ratios where possible. Check for missing files and unnecessarily large downloads. Responsive markup is useful only when it accurately describes real assets and the space those assets occupy on the page.
Further reading
Put the idea to work.
Explore free browser tools for images, text and developer workflows.