[gatsby-plugin-sharp] Clarity on (seemingly incorrect) file sizes generated

[jonsadka]

Hi team,

I'm having trouble understanding how gatsby-plugin-sharp determines the image resolutions to generate. It feels like it does what it wants regardless of the options I specify.

For example, let's take this set of options in gatsby-config:

{
  resolve: 'gatsby-plugin-sharp',
  options: {
    srcSetBreakpoints: [800],
  },
},

Based on this blurb in the documentation I would expect to only get resolutions of 800, 1200, and 1600 (i.e. 1x, 1.5x and 2x) when specifying srcSetBreakpoints: [800] but the .jpg files generated are:

• 300x169
• 600x338
• 800x450
• 900x506
• 1200x676
• 4000x2250 (original image)

I am noticing similar behavior when I specify this configuration in the query:

  query {
    file(relativePath: { eq: "images/foo-bar.jpg" }) {
      childImageSharp {
        fluid(srcSetBreakpoints: [800]) {
          ...GatsbyImageSharpFluid_withWebp
        }
      }
    }
  }

Any thoughts here?

Environment

  System:
    OS: macOS 10.15.4
    CPU: x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v12.16.1/bin/npm
  Browsers:
    Chrome: 81.0.4044.138
    Firefox: 76.0.1
    Safari: 13.1
  npmPackages:
    gatsby: ^2.22.0 => 2.22.0 
    gatsby-image: ^2.4.4 => 2.4.4 
    gatsby-plugin-affirm: ^1.6.0 => 1.6.0 
    gatsby-plugin-canonical-urls: ^2.3.1 => 2.3.1 
    gatsby-plugin-manifest: ^2.4.6 => 2.4.6 
    gatsby-plugin-mdx: ^1.2.9 => 1.2.9 
    gatsby-plugin-offline: ^3.2.4 => 3.2.4 
    gatsby-plugin-react-helmet: ^3.3.1 => 3.3.1 
    gatsby-plugin-robots-txt: ^1.5.0 => 1.5.0 
    gatsby-plugin-segment-js: ^3.2.2 => 3.2.2 
    gatsby-plugin-sharp: ^2.6.6 => 2.6.6 
    gatsby-plugin-sitemap: ^2.4.2 => 2.4.2 
    gatsby-plugin-styletron: ^5.0.0 => 5.0.0 
    gatsby-plugin-typescript: ^2.4.2 => 2.4.2 
    gatsby-plugin-webpack-bundle-analyzer: ^1.0.5 => 1.0.5 
    gatsby-source-filesystem: ^2.3.5 => 2.3.5 
    gatsby-source-mongodb: ^2.3.1 => 2.3.1 
    gatsby-transformer-sharp: ^2.5.2 => 2.5.2