No breakpoints set, but image changes on viewport change

Summary

If you open up the page width a browser width of 150px and drag it all the way open, then at around 1300px new images are requested with a bigger size and better quality. But why does this happen? I have absolutely no breakpoints set. Is this enabled by default?

Relevant information

page.js

import React from "react"
import { graphql, useStaticQuery } from "gatsby"
import { getImage } from "gatsby-plugin-image"

import BackgroundImage from "gatsby-background-image"

import { convertToBgImage } from "gbimage-bridge"

const Index = () => {
  const { sliderImage } = useStaticQuery(
    graphql`
      query {
        sliderImage: file(
          relativePath: { eq: "slider/header_ueberdachung.jpg" }
        ) {
          childImageSharp {
            gatsbyImageData(
              quality: 85
              placeholder: BLURRED
              formats: [AUTO, WEBP, JPG]
            )
          }
        }
      }
    `
  )
  const image = getImage(sliderImage)

  const bgImage = convertToBgImage(image)

  return (
    <BackgroundImage
      {...bgImage}
      style={{ width: "100%" }}
      className="h-full w-full flex items-center"
    ></BackgroundImage>
  )
}

export default Index

Nothing set up in the gatsby-config for the gatsby-plugin-sharp plugin.

The first two elements get loaded, when you enter the page. The other three are loaded, when you drag open the browser

Environment


  System:
    OS: Windows 10 10.0.19042
    CPU: (12) x64 Intel(R) Core(TM) i7-10850H CPU @ 2.70GHz
  Binaries:
    Node: 14.15.5 - C:\Program Files\nodejs\node.EXE
    npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.9.5 - C:\Python39\python.EXE
  Browsers:
    Edge: Spartan (44.19041.906.0), Chromium (94.0.992.38)
  npmPackages:
    gatsby: ^3.14.0 => 3.14.0 
    gatsby-background-image: ^1.5.3 => 1.5.3 
    gatsby-image: ^3.11.0 => 3.11.0 
    gatsby-plugin-anchor-links: ^1.2.1 => 1.2.1 
    gatsby-plugin-brotli: ^2.0.0 => 2.0.0 
    gatsby-plugin-gatsby-cloud: ^3.2.0 => 3.2.0 
    gatsby-plugin-image: ^1.14.0 => 1.14.0 
    gatsby-plugin-manifest: ^3.14.0 => 3.14.0 
    gatsby-plugin-offline: ^4.14.0 => 4.14.0 
    gatsby-plugin-postcss: ^4.14.0 => 4.14.0 
    gatsby-plugin-preact: ^5.14.0 => 5.14.0 
    gatsby-plugin-react-helmet: ^4.14.0 => 4.14.0 
    gatsby-plugin-recaptcha: ^1.0.5 => 1.0.5 
    gatsby-plugin-sharp: ^3.14.0 => 3.14.0 
    gatsby-plugin-webpack-bundle-analyser-v2: ^1.1.25 => 1.1.25 
    gatsby-plugin-zopfli: ^2.0.0 => 2.0.0 
    gatsby-source-filesystem: ^3.14.0 => 3.14.0 
    gatsby-transformer-sharp: ^3.14.0 => 3.14.0 
  npmGlobalPackages:
    gatsby-cli: 3.14.1

timhagn / gatsby-background-image

No breakpoints set, but image changes on viewport change #167

Summary

Relevant information

Environment