-
Notifications
You must be signed in to change notification settings - Fork 10.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Responsive images generated with contain fit and an aspect ratio that causes pillarboxing are missing high resolution images #33647
Comments
Hi! Please provide a minimal reproduction showing this. Thanks! |
Hi @LekoArts, I've created a reproduction repo: https://github.com/teddybradford/gatsby-image-bug-repro/ and I updated the original post for clarity and to match the repo. Let me know if you have any questions. |
Hiya! This issue has gone quiet. Spooky quiet. 👻 We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. Thanks for being a part of the Gatsby community! 💪💜 |
Not stale |
Hiya! This issue has gone quiet. Spooky quiet. 👻 We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. Thanks for being a part of the Gatsby community! 💪💜 |
Not stale |
Hiya! This issue has gone quiet. Spooky quiet. 👻 We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. Thanks for being a part of the Gatsby community! 💪💜 |
Not stale 😄 |
Hiya! This issue has gone quiet. Spooky quiet. 👻 We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. Thanks for being a part of the Gatsby community! 💪💜 |
Preliminary Checks
Description
Images that get transformed with imagesharp using
fit: contain
and anaspectRatio
that causes pillarboxing should add the pillarboxes before resizing the image for each breakpoint. Otherwise, we end up losing higher resolution images due to the order of operations.Steps to Reproduce
Expected Result
As an example, for a portrait image with a resolution of 800x1000, and image breakpoints of
[600, 900, 1200]
, the resulting responsive images should be:We can get these resolutions if instead of sizing down first to conform to the breakpoint and aspect ratio, the pillarboxes were added to to the sides of the image first, and then the image resized (e.g. the 800x1000 image gets cropped to be 2000x1000, and then resized to each breakpoint after that).
Actual Result
Instead, the resulting responsive images are:
Environment
The text was updated successfully, but these errors were encountered: