fix: correct Image component descriptor handling for fluid images#3756
Merged
Conversation
This update resolves an issue where the `Image` component incorrectly generated density descriptors (`1x/2x/3x`) instead of width descriptors (`w`) for fluid images when the source dimensions limited the srcset to exactly three entries. The logic now ensures that descriptor types are determined by the image mode (fixed or fluid) rather than the number of srcset entries. Additionally, tests have been updated to verify the correct behavior for both fixed-width and fluid images.
fredericoo
approved these changes
May 11, 2026
Contributor
fredericoo
left a comment
There was a problem hiding this comment.
thanks for your contribution! a few comments but overall this is very neat
Contributor
Author
Thanks for the comments, I made the usage a bit more explicit and added the missing test assertions 🙂 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
WHY are these changes introduced?
The
Imagecomponent can produce1x/2x/3xdensity descriptors for fluid (responsive) images when the source image dimensions are small enough that the srcset ladder is filtered down to exactly 3 entries. In that case thesizesattribute is silently ignored and the browser always picks images by DPR instead of container size, causing blurry images on low-DPR screens.WHAT is this pull request doing?
generateSrcSetdetermined descriptor type (xvsw) by checkingsizesArray.length === 3, under the assumption that only fixed-width images produce exactly 3 entries. That assumption breaks when source-dimension filtering reduces a fluid image's srcset to exactly 3 entries (e.g. a 600px-wide image with defaultsrcSetOptionsproduces[200, 400, 600]).The fix adds an explicit
fixedboolean parameter togenerateSrcSet(defaulting tofalse) and uses it instead of the length heuristic.FixedWidthImagepassestrue;FluidImageuses the default.HOW to test your changes?
Render a fluid
Imagewith a small source image (e.g.data={{ url: '...', width: 600, height: 600 }}) and asizesprop. Before this fix, thesrcsetattribute contains1x/2x/3xdescriptors andsizesis ignored. After this fix,srcsetcontains200w/400w/600wdescriptors andsizesis respected.The new regression test in
Image.test.tsxcovers this case directly.Checklist
Made with Cursor