In React, write responsive image choices with srcSet and sizes; the browser—not React—uses those hints, the image’s pixel density, and the viewing conditions to choose a file. Use width descriptors that match each file’s real width, make sizes reflect the image’s CSS layout slot, and verify the requested candidate in browser developer tools.
What do srcSet and sizes do?
React renders an ordinary HTML <img> element. In JSX, the attribute is camel-cased as srcSet; sizes describes the image’s expected display slot at different layout conditions. The browser evaluates the available candidates for the current situation. React’s image reference and MDN’s <img> reference describe these attributes.
As an Amazon Associate I earn from qualifying purchases.
For width-based selection, pair each URL in srcSet with a w descriptor equal to that file’s intrinsic pixel width. The sizes value estimates the CSS slot width; it does not set the rendered width. CSS determines layout, while a useful src supplies a fallback.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →<img
src="/images/article-960.jpg"
srcSet="/images/article-480.jpg 480w, /images/article-960.jpg 960w, /images/article-1440.jpg 1440w"
sizes="(max-width: 640px) 100vw, 50vw"
width={1440}
height={960}
alt="A description of the image"
/>In this example, the image is expected to occupy the full viewport width at widths up to 640 CSS pixels and half the viewport width above that. Conditions in sizes are evaluated in order; the first matching condition supplies the slot estimate. Add an unconditional final size when your layout needs one. If this estimate does not reflect the CSS, the browser may fetch an unnecessarily large file or one too small for the rendered image. MDN explains the relationship between sizes and width descriptors.
#1 Best Overall
How does DPR affect which candidate loads?
Device pixel ratio (DPR) helps determine how many source pixels are useful for a CSS-sized slot. A 600-CSS-pixel slot on a 2× display may lead the browser to look for an image about 1,200 pixels wide. The browser still has discretion: user-agent behavior and conditions such as bandwidth can affect the resource it selects. The markup offers candidates; it does not command one exact URL. MDN’s selection example and its devicePixelRatio reference cover these concepts.
Do not multiply width descriptors by DPR yourself. List each file’s actual intrinsic width, provide a credible sizes estimate, and let the browser account for density. For a fixed rendered size with density variants, use 1x and 2x descriptors instead; sizes is not needed for that form. Do not mix w and x descriptors in one candidate list. MDN’s <img> documentation details both descriptor types.
When should you use <picture> instead?
- Same image, different resolutions: Use
<img srcSet sizes>when the subject and crop stay the same but viewport layout or pixel density changes. - Different crop or composition: Use
<picture>with ordered<source media>elements for art direction, such as a wide desktop image and a tighter mobile crop. - Different file formats: Use
<picture>with<source type>values for formats such as AVIF or WebP, followed by a broadly supported fallback in the nested<img>. - Fixed-size density variants: Use
srcSetwithxdescriptors on<img>.
The nested <img> in <picture> provides fallback content and alternative text. See MDN’s <picture> reference and React’s image reference.
Recommended Free Tools
How do dimensions and loading affect the image?
When the image dimensions are known, provide width and height. The browser can use their aspect ratio to reserve space before the image arrives, helping mitigate layout shifts. This is the behavior React recommends in its DOM <img> documentation.
React documents that server rendering automatically generates an image preload hint for an <img> by default. It does not generate that hint when the image has loading="lazy" or fetchPriority="low". Lazy loading asks the browser to defer fetching until the image approaches the viewport; low priority allows fetching at a lower priority. React also documents exceptions for images inside <picture> or <noscript>, data URLs, and notes that framework or component defaults may differ. Check the behavior of the framework and image component in your application before relying on the default.
For below-the-fold images, lazy loading can fit the page’s needs. For a prominent, initially visible hero image, consider whether it should be delayed; avoid adding lazy loading or low priority without a reason. These are implementation considerations based on React’s documented behavior, not a guarantee of a particular performance result.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.When does an image CDN help?
A browser can only choose among image URLs available in markup or otherwise supplied. An image service can generate transformed variants from an original and make them available as srcSet candidates. Cloudinary documents responsive image transformations and a React responsive-image plugin; its client-side approach can affect when the image request begins.
Cloudflare documents ordinary srcset markup and an automatic-width option that can choose a width from one URL. These are provider-specific approaches, not evidence that one service is universally best. Consider whether you want the browser to select from explicit candidates or the service to choose a transformed width, and account for provider-specific URLs, transformations, formats, caching, and configuration.
Best Value
Using a CDN does not remove the need to understand the layout. With explicit srcSet and sizes, the candidate widths still need to match the delivered files, and the slot estimate still needs to match the CSS design. Dynamic transformations can reduce manual variant generation, but the provider’s URL patterns and delivery setup become part of the implementation.
Quick Recap
How can you verify the browser’s choice?
- Inspect the rendered image element in developer tools. Confirm that the output contains the intended
src,srcset, andsizesvalues. - Compare
sizeswith the actual CSS slot at representative viewport widths. Adjust conditions if the estimate differs from the layout. - Open the browser’s Network panel and inspect the requested image URL. Disable the cache when repeating a test could otherwise reuse a previously fetched candidate. MDN describes using browser network tools to inspect image loads.
- Test more than one viewport and DPR. Treat the observed URL as the result for those conditions, not a guarantee that every browser will make the same choice; browser discretion and cache can affect observations.
- Use Lighthouse’s properly sized images audit to identify images that may need resizing. An audit is a diagnostic, not proof that all browsers will select the same file.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
