Responsive Images: Choose the Right File for Each Screen

Measure the space the image occupies in the page before exporting files. A card may fill the viewport on a phone, half a row on a tablet, and one third of a fixed-width container on a desktop. Those are layout widths, not necessarily the device's full screen width. Padding and gaps also reduce the image slot. Write down the largest realistic slot and the smaller breakpoints that matter. If the image is always constrained to 600 CSS pixels, generating a 5000-pixel candidate adds storage and processing without serving a clear requirement.

The MDN responsive images guide distinguishes resolution switching from art direction. Resolution switching supplies the same composition at different pixel sizes. Art direction changes the composition, such as replacing a wide landscape view with a tighter portrait crop on mobile. These solve different problems: more pixels make a small subject sharper but do not make it larger within the composition. Use the crop versus resize guide when the important subject disappears in a narrow card.

For an article illustration, a starting set might be 480, 800, 1200, and 1600 pixels wide, provided the original is large enough. Those are examples, not standards that every site must copy. Use the image resizer, enter a width, leave height automatic, and export each candidate from the same original. Keep the aspect ratio consistent for resolution switching. Label files with their actual dimensions so the HTML cannot accidentally advertise an 800-pixel file as 1600 pixels. A false descriptor defeats the browser's selection logic.

Apply the final output format and quality during export where possible. Converting one candidate to lossy JPEG, resizing that result repeatedly, and then converting each version again compounds avoidable loss. Transparent graphics should remain in a format supporting alpha. If the source is too small for a larger candidate, omit that candidate or obtain a better original. Enlarging an image cannot recover missing detail. The high-density image guide explains the difference between serving enough original pixels and manufacturing extra pixels by interpolation.

A width-based srcset lists URLs with descriptors such as 480w and 1200w. The sizes attribute describes the expected displayed width under your layout conditions. For a full-width mobile image inside a wider desktop column, an example is (max-width: 700px) 100vw, 700px. Adjust that to account for your actual container and padding; it is not a universal snippet. The browser combines this information with display density and other considerations to select a candidate. Supplying srcset while leaving an inaccurate default slot estimate can still cause unnecessarily large downloads.

For a fixed-size icon, density descriptors such as 1x and 2x can be simpler. Do not mix width and density descriptors in the same srcset. Keep a normal src as a fallback, meaningful alt on the img, and width and height attributes describing the image ratio. Those dimensions help reserve space before the resource loads; CSS can still make the image fluid. A typical style is max-width: 100%; height: auto. HTML dimensions are not an instruction to stretch every candidate to a fixed physical size regardless of the stylesheet.

The picture element can offer source elements with type or media conditions before a fallback img. For format alternatives, offer a supported modern format followed by another candidate and keep the conventional fallback on img. For art direction, offer a tighter crop for narrow layouts and a wider composition for large layouts. A source may itself contain a srcset. Keep every alternate meaningfully equivalent to the shared text alternative; changing from a product detail to an unrelated lifestyle photograph can make one alt description inaccurate across breakpoints.

Picture does not remove the need to consider accessibility and loading. The fallback img remains the semantic image and carries its alt attribute. If different crops have different aspect ratios, reserve the appropriate layout space at each breakpoint so a late image does not move the following content. Avoid making essential text part of the crop: a heading embedded in the wide image may be cut away in the mobile version. Use real HTML text over or beside decorative artwork when the words are part of the page's message.

Use a fresh page load for each test viewport, inspect currentSrc, and compare the resource's natural dimensions with the displayed box. A browser may keep a previously downloaded large candidate after you shrink the window rather than fetch a smaller one, so resizing an already-loaded tab is not a reliable download-size experiment. Test with cache disabled, then test normal caching separately. Check both a standard-density and high-density configuration when available. A candidate larger than the CSS width can be correct when it supplies multiple source pixels per displayed pixel.

Do not lazy-load the image likely to become Largest Contentful Paint. Make its URL discoverable in the initial HTML, and use high fetch priority selectively rather than labeling every image urgent. Lazy loading can help below-the-fold images avoid competing with initial content. Finally inspect transfer sizes, visual quality, layout stability, and fallback behavior together. The image SEO checklist puts these checks in the broader page context. Responsive markup is successful when it delivers the necessary visual information efficiently, not when it merely contains the greatest number of source elements.