Gatsby: Is Gatsby-image supposed to serve larger images on mobile than on desktop?

[mixolydian251]

Summary

I was taking a peek at the images served using gatsby-image and noticed that images that are served to mobile are larger than the images served to the desktop browser. Is this a bug, or a limitation on mobile devices?

Relevant information

I first noticed this on my own site, but saw that the gatsby-image demo was producing the same issue.

Steps to reproduce

• Go to gatsby-image demo
• Open developer network tool and load the site
  
• Simulate mobile through dev tools and load the site
  

Environment (if relevant)

File contents (if changed)

gatsby-config.js: N/A
package.json: N/A
gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[kakadiadarpan]

Hi @mixolydian251, for me it's giving a larger sized image for the desktop and smaller sized for the mobile. Please check the screenshots attached below.

Desktop:

Mobile:

[mixolydian251]

hmm interesting.. Which OS are you running?

I am running Chrome on MacOS Sierra, and have a team member running a linux dist that has seen the same issue.

Here is another live screenshot of the issue on my end.

Looks like I am getting your desktop sizes on mobile, and smaller sizes on my desktop version?

[kakadiadarpan]

I'm on MacOS High Sierra.

[kakadiadarpan]

cc @pieh @m-allanson

[mixolydian251]

Although it looks like on on Firefox I am getting different results.

First image is smaller on mobile, while 2nd stays the same.

[stefanprobst]

This is very probably because of Device Pixel Ratio. What happens in Firefox when you select a specific device?

[mixolydian251]

Yes, looks like DPR is causing the image size to scale up as the ratio increases. From what I am seeing mobile devices tend to have higher ratios.

On my screen it looks like the pixel ration is close to 1. When simulating mobile DPR increases and changes when switching devices. Thus the increase in file size?

@kakadiadarpan What device are you simulating in devtools? If you are using a retina display then simulating something with a lower DPR, could possibly be why we are getting different results?

[kakadiadarpan]

@mixolydian251 I have an MBP with a resolution of 2560 x 1600, and using an iPhone 7 plus for simulation which has a DPR of 3.0.

[fk]

Hey y'all! 👋I wrote this last night while not really being awake anymore (and then forgot to post it ;-)), so take this with caution 🙏

• Something that tripped me up when first debugging these kinda things: Chrome's device presets (as Firefox's) also set a "DPR" that gets emulated — while Firefox always displays the emulated DRP in its UI, in Chrome you have to choose to display that info via "Add/Remove device pixel ratio":
  
• On top of device pixel ratio, it's also important what type of gatsby-image we have queried (fluid or fixed) (and looking at the source of the demo page even CSS (changing the image at a certain breakpoint)).
• Various of that information is missing from the original issue, https://github.com/gatsbyjs/gatsby/issues/8100#issuecomment-420886253 uses a Chrome device preset which sets DPR, while the Firefox example uses a DPR of 1.0 for mobile https://github.com/gatsbyjs/gatsby/issues/8100#issuecomment-420890153.

FWIW, my gut says everything is working as expected 🤞

[CanRau]

Just ran a Chrome Audit which mentioned a too large image on mobile (1280px)
and figured it might be due to the sizes attribute

<picture>
  <source
    srcset="/static/banner-5be5e.jpg 320w,
          /static/banner-bd363.jpg 640w,
          /static/banner-2f993.jpg 1280w,
          /static/banner-ed8a9.jpg 1920w,
          /static/banner-04caa.jpg 2560w,
          /static/banner-9bee0.jpg 3840w,
          /static/banner-95454.jpg 4000w"
    sizes="(max-width: 1280px) 100vw, 1280px"
  >
</picture>

Is this the best setting?
Uh, it's from a fluid query and it's the header background so full screen
Also, there is currently no way overriding the sizes attribute? I'm at least getting an error, that it expects an object and not a string even though this gatsby-image/src/index.js#L453 sounds pretty stringy to me?

[stefanprobst]

@CanRau I think the issue is not so much the sizes but the default breakpoints for srcSet. In your example you would get the 1280px image also for viewports with 641px width. Hopefully #8825 will help here.

[CanRau]

Right! Didn't really checked srcSet, thanks for the hint and the link, the PR looks promising 👍

[CanRau]

I would say it's better now thanks to #8825 🎉

[LekoArts]

Closing this issue as answered. If you need more help, please reach out to us!