Skip to content

fix: correct Image component descriptor handling for fluid images#3756

Merged
fredericoo merged 3 commits into
Shopify:mainfrom
z0n:fix/image-srcset-generation
May 18, 2026
Merged

fix: correct Image component descriptor handling for fluid images#3756
fredericoo merged 3 commits into
Shopify:mainfrom
z0n:fix/image-srcset-generation

Conversation

@z0n
Copy link
Copy Markdown
Contributor

@z0n z0n commented May 7, 2026

WHY are these changes introduced?

The Image component can produce 1x/2x/3x density 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 the sizes attribute 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?

generateSrcSet determined descriptor type (x vs w) by checking sizesArray.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 default srcSetOptions produces [200, 400, 600]).

The fix adds an explicit fixed boolean parameter to generateSrcSet (defaulting to false) and uses it instead of the length heuristic. FixedWidthImage passes true; FluidImage uses the default.

HOW to test your changes?

Render a fluid Image with a small source image (e.g. data={{ url: '...', width: 600, height: 600 }}) and a sizes prop. Before this fix, the srcset attribute contains 1x/2x/3x descriptors and sizes is ignored. After this fix, srcset contains 200w/400w/600w descriptors and sizes is respected.

The new regression test in Image.test.tsx covers this case directly.

Checklist

  • I've read the Contributing Guidelines
  • I've considered possible cross-platform impacts (Mac, Linux, Windows)
  • I've added a changeset if this PR contains user-facing or functional changes. Test changes or internal-only config changes do not require a changeset.
  • I've added tests to cover my changes
  • I've added or updated the documentation

Made with Cursor

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.
@z0n z0n requested a review from a team as a code owner May 7, 2026 15:34
Copy link
Copy Markdown
Contributor

@fredericoo fredericoo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks for your contribution! a few comments but overall this is very neat

Comment thread packages/hydrogen-react/src/Image.tsx Outdated
Comment thread packages/hydrogen-react/src/Image.test.tsx
Comment thread packages/hydrogen-react/src/Image.test.tsx
Comment thread .changeset/fix-image-fluid-x-descriptors.md
@z0n
Copy link
Copy Markdown
Contributor Author

z0n commented May 11, 2026

thanks for your contribution! a few comments but overall this is very neat

Thanks for the comments, I made the usage a bit more explicit and added the missing test assertions 🙂

@fredericoo fredericoo merged commit a810db4 into Shopify:main May 18, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants