[gatsby-plugin-image] The big image is mistakenly downloaded and used.

[mwskwong]

Description

In a smaller screen. the biggest image is selected and downloaded despite there is a smaller, more fitting image available.

Edit: I suspect it is due to the sizes prop specified in <img> and <picture>.
Edit 2: The same goes for https://react18ecommercedemo.gatsbyjs.io/. The one using React 18
Edit 3: It appears only appear when the screen size is small. e.g. the Moto 4, iPad, and iPad Pro preset of Chromium-based browsers

Steps to reproduce

Consider the default template: https://gatsby-starter-default-demo.netlify.app/

1. Open DEV console (F12) in the browser, change to mobile view (e.g. Moto G4), and navigate to the website
2. Observe which version of gatsby-astronaut.png is downloaded.
   
3. In this case, the 800x800 version is downloaded and used despite the screen width is 360 and the width component is 300.
   
4. View the HTML code. There is a version of 300w available but is not used for some reason.

Expected result

The 300w version of the image should be used.

Actual result

The 800w version of the image, i.e. the largest version of the image, is used instead.

Environment

  System:
    OS: Windows 10 10.0.18363
    CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz
  Binaries:
    Node: 14.17.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 7.14.0 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.9.5
  Browsers:
    Chrome: 91.0.4472.114
    Edge: Spartan (44.18362.449.0)
  npmPackages:
    gatsby: ^3.8.0 => 3.8.0 
    gatsby-plugin-emotion: ^6.8.0 => 6.8.0 
    gatsby-plugin-image: ^1.8.0 => 1.8.0 
    gatsby-plugin-manifest: ^3.8.0 => 3.8.0 
    gatsby-plugin-offline: ^4.8.0 => 4.8.0 
    gatsby-plugin-react-helmet: ^4.8.0 => 4.8.0 
    gatsby-plugin-robots-txt: ^1.6.2 => 1.6.2 
    gatsby-plugin-root-import: ^2.0.6 => 2.0.6 
    gatsby-plugin-sharp: ^3.8.0 => 3.8.0 
    gatsby-plugin-sitemap: ^4.4.0 => 4.4.0 
    gatsby-plugin-webpack-bundle-analyser-v2: ^1.1.24 => 1.1.24 
    gatsby-source-filesystem: ^3.8.0 => 3.8.0 
    gatsby-transformer-sharp: ^3.8.0 => 3.8.0 

[wardpeet]

Hey, this is not a bug. The browser calculates the image with DPI (dots per inch) in mind. For Moto G4 this is 3x which means it gets the image 3x the screen width.

You can change the behaviour while using sizes in https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/#all-options