gatsbyjs/gatsby · error · Error

All ints in srcSetBreakpoints should be positive ints larger

Error message

All ints in srcSetBreakpoints should be positive ints larger than zero (> 0), found ${breakpoint}

What it means

gatsby-plugin-sharp accepts a custom `srcSetBreakpoints` array to control responsive image breakpoints beyond the defaults. Each breakpoint must be a positive integer > 0; if any element is < 1 (0, negative, or NaN from arithmetic), the loop throws. Breakpoints also must not duplicate the base size, but duplicates are silently skipped - only the < 1 case throws.

Source

Thrown at packages/gatsby-plugin-sharp/src/index.js:477

  // is 800px, the sizes would then be: 200, 400, 800, 1200, 1600.
  //
  // This is enough sizes to provide close to the optimal image size for every
  // device size / screen resolution while (hopefully) not requiring too much
  // image processing time (Sharp has optimizations thankfully for creating
  // multiple sizes of the same input file)
  const fluidSizes = [
    options[fixedDimension], // ensure maxWidth (or maxHeight) is added
  ]
  // use standard breakpoints if no custom breakpoints are specified
  if (!options.srcSetBreakpoints || !options.srcSetBreakpoints.length) {
    fluidSizes.push(options[fixedDimension] / 4)
    fluidSizes.push(options[fixedDimension] / 2)
    fluidSizes.push(options[fixedDimension] * 1.5)
    fluidSizes.push(options[fixedDimension] * 2)
  } else {
    options.srcSetBreakpoints.forEach(breakpoint => {
      if (breakpoint < 1) {
        throw new Error(
          `All ints in srcSetBreakpoints should be positive ints larger than zero (> 0), found ${breakpoint}`
        )
      }
      // ensure no duplicates are added
      if (fluidSizes.includes(breakpoint)) {
        return
      }
      fluidSizes.push(breakpoint)
    })
  }
  let filteredSizes = fluidSizes.filter(
    size => size < (fixedDimension === `maxWidth` ? width : height)
  )

  // Add the original image to ensure the largest image possible
  // is available for small images. Also so we can link to
  // the original image.
  filteredSizes.push(fixedDimension === `maxWidth` ? width : height)

View on GitHub (pinned to 8b06340921)

Solutions

1. Provide only positive integers: srcSetBreakpoints={[400, 800, 1200]}.
2. Filter/clamp generated breakpoints: bp.filter(n => Number.isInteger(n) && n > 0).
3. Omit srcSetBreakpoints entirely to use the default [size/4, size/2, size*1.5, size*2].

Example fix

// before
<StaticImage src="./hero.jpg" srcSetBreakpoints={[0, 750]} />

// after
<StaticImage src="./hero.jpg" srcSetBreakpoints={[750]} />

function sanitizeBreakpoints(bp) {
  if (!Array.isArray(bp)) return undefined;
  const clean = bp.filter(n => Number.isInteger(n) && n > 0);
  return clean.length ? clean : undefined;
}

function areValidBreakpoints(bp) {
  return Array.isArray(bp) && bp.every(n => Number.isInteger(n) && n > 0);
}

When it happens

Trigger: Passing srcSetBreakpoints={[0, 400, 800]}, srcSetBreakpoints={[-1]}, or a breakpoint derived from a divide that yields 0/NaN, e.g. to a Gatsby Image component or the sharp fluid API.

Common situations: Generating breakpoints from a container width that is 0 at first paint; copy-pasting a config with a 0 placeholder; mixing units (passing '400px' strings that coerce to NaN).

Related errors

• ${fixedDimension} has to be a positive int larger than zero
• toFormat seems to be empty, we need a fileExtension to set i
• ${prop} has to be a positive int larger than zero (> 0), now
• Specified dimensions for images must be positive numbers (>
• Specified dimensions for images must be positive numbers (>

AI-assisted analysis of gatsbyjs/gatsby@8b06340921 (2026-08-13). Data as JSON: /api/errors/1daa513188b0c8ac. Report an issue: GitHub.