iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
In React, you describe responsive image candidates with srcSet and sizes; the browser—not React—chooses which candidate to download. Use width descriptors that match the files’ real pixel widths, make sizes reflect the image’s CSS layout slot, and let the browser account for display pixel density (DPR).
How React responsive image selection works
React renders ordinary HTML image attributes. JSX uses the camel-cased names srcSet and sizes, but the resulting markup is evaluated by the browser. React supplies candidates and a description of the expected slot; the browser selects a resource for the current rendering conditions. React’s <img> reference and MDN’s <img> documentation describe the attributes and selection process.
For width-based selection, list image URLs with their intrinsic widths as w descriptors. The descriptor must match the actual width of that file. A useful src remains as a fallback. For example:
<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"
/>Here, the candidate widths describe the files, while sizes describes the expected rendered slot: full viewport width at or below 640 CSS pixels, and half the viewport width above that. It does not set the image’s visual width; CSS controls layout. If the slot estimate does not match the CSS design, the browser may fetch an image that is larger or smaller than needed. Conditions in sizes are checked in order, and the first matching condition is used; add an unconditional final size when the layout calls for one. See MDN’s explanation of sizes.
#1 Best Overall
How DPR affects the downloaded candidate
DPR is the ratio between a display’s physical pixels and CSS pixels. The browser considers the slot size together with display pixel density when choosing a width-based candidate. MDN gives the example of a 600-CSS-pixel slot on a 2× display, for which the browser looks for an image around 1200 pixels wide. That is a selection target, not a guarantee: browser behavior and conditions such as bandwidth can affect the chosen resource. MDN documents the sizing behavior, and its responsive image guidance explains candidate selection.
With width descriptors, do not multiply the descriptor values by DPR yourself. Supply actual file widths and an accurate slot estimate, and let the browser apply density. If an image always renders at a fixed CSS size and you only need density variants, use 1x and 2x descriptors instead; in that mode, the src candidate is treated as 1x, and sizes is unnecessary. Do not mix w and x descriptors in one candidate list. MDN’s srcset reference covers both descriptor types.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
When to use srcSet, picture, or density descriptors
- Same image, different resolutions: use
<img srcSet sizes>when the subject and crop remain the same but the layout slot or display density changes. - Different crops for different conditions: use
<picture>with ordered<source media>elements for art direction, such as a wide desktop composition and a tighter mobile crop. Put a fallback<img>inside<picture>; it supplies alternative text too. - Different image formats: use
<picture>with<source type>entries for formats such as AVIF or WebP, followed by a broadly supported fallback in<img>. - Fixed rendered size, higher-density variants: use
srcSetwithxdescriptors.
These choices are alternatives for different needs, not interchangeable spellings. MDN’s <picture> reference describes art direction and format selection; React’s image component reference covers the JSX image attributes.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Reserve layout space and avoid delaying important images
When dimensions are known, set width and height on the image. The browser can use their aspect ratio to reserve space before the file arrives, helping mitigate content layout shifts. React specifically recommends supplying dimensions when known. React’s image documentation; MDN on image dimensions.
Rank #3
React documents a server-rendering behavior that matters for loading: by default, it generates an image preload hint for a rendered <img>. 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 still permits fetching, but at a lower priority. React also notes exceptions, including images inside <picture> or <noscript>, data URLs, and differences that framework or component defaults may introduce. Check the behavior of the framework and image component actually in use. React’s <img> reference.
- For below-the-fold images, consider
loading="lazy"where deferring the request suits the page. - For an important visible hero image, consider whether the default server-rendered preload is appropriate and avoid unintentionally delaying it.
What a CDN can—and cannot—do
A CDN or image service can create transformed variants from an original image and provide their URLs as responsive candidates. Cloudinary documents transformation URLs for responsive markup and a React responsive plugin that responds to viewport width; it also describes a client-side responsive approach. The implementation choice can affect when an image request starts. See Cloudinary’s responsive images documentation.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Cloudflare documents standard srcset markup as well as an automatic-width option that can select a width from a single URL. These are provider-specific capabilities, not universal browser features. Compare whether you want explicit browser-driven candidates in markup or service-driven automatic resizing, and account for how the request is initiated. Cloudflare’s responsive images documentation.
Neither approach removes the need to understand the page layout. With explicit srcSet and sizes, the widths must still match the delivered files and the slot estimate must match the CSS. Dynamic transformation can reduce manual variant generation, but the provider’s URL patterns, transformations, formats, caching, and configuration are implementation decisions.
Quick Recap
Verify what the browser actually requests
- Inspect the rendered image. Confirm the final element has the expected
src,srcset, andsizesvalues. This catches JSX or component configuration that differs from what you intended. - Compare the slot hint with CSS. Check the image’s rendered width at representative viewport sizes and ensure the matching
sizescondition describes that slot. - Check the Network panel. Inspect the requested image URL in browser developer tools. Disable the cache when repeated tests might otherwise reuse an earlier candidate. MDN also recommends browser network tools for inspecting loaded images. MDN’s
<img>documentation. - Vary viewport and DPR. Test more than one viewport and display pixel density. Treat a selected URL as an observation for those conditions, not a promise that every browser will choose the same file; browser discretion and cache can affect what you see.
- Use Lighthouse as a diagnostic. Its properly sized images audit can flag images that may need resizing, but it does not prove that every browser will select the same candidate. Lighthouse’s properly sized images audit.
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.
