Responsive images generated with contain fit and an aspect ratio that causes pillarboxing are missing high resolution images

teddybradford commented 3 years ago

Preliminary Checks

[X] This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
[X] This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

Images that get transformed with imagesharp using fit: contain and an aspectRatio 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

Generate responsive images via a GraphQL query (or StaticImage works too) with the following settings:

childImageSharp {
  gatsbyImageData(
    layout: FULL_WIDTH
    aspectRatio: 2
    transformOptions: { fit: CONTAIN }
  )
}

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:

600x300
900x450
1200x600

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:

600x300
800x400

Environment

System:
    OS: macOS 11.6
    CPU: (8) arm64 Apple M1
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.8.0 - ~/.nvm/versions/node/v16.8.0/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.8.0/bin/yarn
    npm: 8.1.0 - ~/.nvm/versions/node/v16.8.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Firefox: 93.0
    Safari: 15.0
  npmGlobalPackages:
    gatsby-cli: 3.14.2

LekoArts commented 3 years ago

Hi!

Please provide a minimal reproduction showing this. Thanks!

teddybradford commented 3 years ago

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.

github-actions[bot] commented 2 years ago

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. If we missed this issue or if you want to keep it open, please reply here. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

teddybradford commented 2 years ago

Not stale

github-actions[bot] commented 2 years ago

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. If we missed this issue or if you want to keep it open, please reply here. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

teddybradford commented 2 years ago

Not stale

github-actions[bot] commented 2 years ago

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. If we missed this issue or if you want to keep it open, please reply here. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

teddybradford commented 2 years ago

Not stale 😄

github-actions[bot] commented 2 years ago

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. If we missed this issue or if you want to keep it open, please reply here. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

gatsbyjs / gatsby