Learning objectives
Distinguish resolution switching from art direction; describe the rendered slot accurately; inspect the image the browser selected.
Prerequisites
Understand img, alt, intrinsic dimensions, CSS widths, and relative URLs. Prepare genuine image files in several sizes for local testing.
Solve two different image problems
Resolution switching supplies different pixel sizes of the same composition. A small phone should not always download the file intended for a large desktop, while a high-density display may benefit from more pixels than its CSS width suggests. Art direction changes the composition itself, such as using a closer crop on a narrow screen so the subject remains visible.
Use srcset on img for candidate selection. Width descriptors such as 480w declare each resource’s actual pixel width. The sizes attribute describes the image’s expected rendered width for the applicable layout. The browser combines that slot size with factors such as display density and its own selection policy. It is a selection system, not a guarantee that one precise file will always be fetched.
Write sizes from the layout outward
If the image fills the viewport on small screens but sits in a fixed-width article on larger screens, say so. A sizes list such as (max-width: 48rem) 100vw, 48rem describes those slots. If the article has side padding, account for it rather than repeatedly supplying an inaccurate 100vw.
Density descriptors such as 1x and 2x suit a fixed CSS slot, for example a small logo. Do not mix width and density descriptors in the same candidate list. Keep an ordinary src as a fallback and supply one meaningful alt on the img. The alternative describes the content across candidates; it does not belong on source elements.
Use picture for a deliberate selection rule
A picture contains source alternatives followed by an img fallback. Source can choose a crop with media or advertise a format with type. The browser evaluates the candidates in order and uses a suitable source. Always retain the img: it provides the image element, fallback resource, dimensions, and alternative text.
Testing requires actual network resources. In developer tools, disable cache when appropriate, try multiple viewport widths and device pixel ratios, then inspect the image’s currentSrc and request size. Resizing alone may not trigger a downgrade after a large resource is already cached. Measure transfers instead of judging the sharpness by eye.
Working example
<img src="garden-800.jpg"
srcset="garden-480.jpg 480w, garden-800.jpg 800w, garden-1440.jpg 1440w"
sizes="(max-width: 48rem) calc(100vw - 2rem), 48rem"
width="1440" height="960"
alt="Raised garden beds beside an accessible paved path">Another example
<picture>
<source media="(max-width: 40rem)" srcset="garden-close.jpg">
<source type="image/avif" srcset="garden-wide.avif">
<img src="garden-wide.jpg" width="1440" height="960" alt="Volunteers working in the community garden">
</picture>Expected output
With the required files served locally, the first example selects a resolution for the described layout. The second uses a close crop on narrow screens, then an AVIF wide image when supported, then a JPEG fallback. These network-resource examples are shown as source because the isolated playground blocks remote loading.
Common mistakes
Do not label an 800-pixel file 1600w. Sizes does not itself set CSS width. Do not leave out the img fallback or use picture merely because an image is responsive in CSS. Check that different art-directed crops still communicate the same alternative meaning.
Accessibility and browser notes
The viewport meta declaration makes CSS viewport assumptions useful on mobile. Keep zoom enabled. Art direction must preserve essential content, not crop out the subject described by alt. Format support changes over time, so keep a broadly usable fallback and test your supported browsers.
Practice
Your card image is 320 CSS pixels wide and has 320- and 640-pixel copies. Write a density candidate list and a short alternative.
Review the solution and reasoning
<img src="museum-320.jpg" srcset="museum-320.jpg 1x, museum-640.jpg 2x" width="320" height="200" alt="The museum entrance with its access ramp">The density list suits a fixed-size slot. A fluid grid would usually need width descriptors and a sizes value that reflects its columns. The intrinsic ratio reserves space even before the file arrives.