Using default breakpoints has unexpected results on my constrained images

[laurenskling]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• 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

(originally posted as discussion, but I believe this to be a bug #33877)

Constrained images use the outputPixelDensities feature. That feature clearly states: Ignored for full width layout images, which use breakpoints instead.
So I find it strange that constrained images actually do use the breakpoints feature. I noticed this when I set default breakpoints in the gatsby-plugin-sharp options.

I actually found out that my constrained image is not using the outputPixelDensities because of my default breakpoints. It is only slicing the width I request and the breakpoint widths, not the sizes it should take from (default or set) outputPixelDensities.

Reproduction Link

Sorry, dont have one now

Steps to Reproduce

{
  resolve: 'gatsby-plugin-sharp',
  options: {
    defaults: {
      breakpoints: [576, 768, 992, 1200, 2400],
    },
  },
},

as suggested at: https://www.gatsbyjs.com/plugins/gatsby-plugin-image/#customizing-the-default-options

Expected Result

I think only FULL_WIDTH images should use the breakpoints setting

Actual Result

a constrained image will slice the breakpoint widths, which don't make sense for constrained images.

Environment

System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-1060NG7 CPU @ 1.20GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.18.0 - /var/folders/gh/yg99pwqj2rngz5wysjcgl8ph0000gn/T/yarn--1636746365142-0.029968737645523547/node
    Yarn: 1.22.15 - /var/folders/gh/yg99pwqj2rngz5wysjcgl8ph0000gn/T/yarn--1636746365142-0.029968737645523547/yarn
    npm: 6.14.15 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 95.0.4638.69
    Safari: 14.0.2

Config Flags

No response

[LekoArts]

Hi!

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

[laurenskling]

Hey @LekoArts ,

I've set up https://github.com/laurenskling/constrained-images-use-breakpoints

here (https://github.com/laurenskling/constrained-images-use-breakpoints/blob/main/gatsby-config.js#L38) it uses default breakpoints.

If you go to http://localhost:8000/___graphql and run:

query MyQuery {
  allFile {
    edges {
      node {
        name
        childImageSharp {
          gatsbyImageData(layout:CONSTRAINED, width: 300)
        }
      }
    }
  }
}

The result will contain among others:

{
          "node": {
            "name": "3",
            "childImageSharp": {
              "gatsbyImageData": {
                "layout": "constrained",
                "backgroundColor": "#e8e8e8",
                "images": {
                  "fallback": {
                    "src": "/static/ab1b8f6fa07f32eaef92e29f0d17d7c5/84d7f/3.jpg",
                    "srcSet": "/static/ab1b8f6fa07f32eaef92e29f0d17d7c5/84d7f/3.jpg 300w,\n/static/ab1b8f6fa07f32eaef92e29f0d17d7c5/a83d8/3.jpg 750w,\n/static/ab1b8f6fa07f32eaef92e29f0d17d7c5/97473/3.jpg 1080w,\n/static/ab1b8f6fa07f32eaef92e29f0d17d7c5/bbb72/3.jpg 1366w,\n/static/ab1b8f6fa07f32eaef92e29f0d17d7c5/0ffda/3.jpg 1920w",
                    "sizes": "(min-width: 300px) 300px, 100vw"
                  },
                  "sources": [
                    {
                      "srcSet": "/static/ab1b8f6fa07f32eaef92e29f0d17d7c5/645e2/3.webp 300w,\n/static/ab1b8f6fa07f32eaef92e29f0d17d7c5/80567/3.webp 750w,\n/static/ab1b8f6fa07f32eaef92e29f0d17d7c5/d7295/3.webp 1080w,\n/static/ab1b8f6fa07f32eaef92e29f0d17d7c5/b8018/3.webp 1366w,\n/static/ab1b8f6fa07f32eaef92e29f0d17d7c5/79c11/3.webp 1920w",
                      "type": "image/webp",
                      "sizes": "(min-width: 300px) 300px, 100vw"
                    }
                  ]
                },
                "width": 300,
                "height": 200
              }
            }
          }
        },

I'm requesting a max image of 300, why would it create 750, 1080, 1366, 1920 as well

[github-actions]

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! 💪💜

[laurenskling]

I still feel like this is something we should discuss

[github-actions]

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! 💪💜