Images scale, query and <Img />

[enzoferey]

Summary

I'm currently moving a plain HTML website to Gatsby and I wonder how I should move responsive images that use multiple scales (@1x, @2x, @3x, @4x) to use the <Img /> component.

Explanation

The images currently look like this:

<img
    src="mySrcFallback"
    srcset="mySrcSetWithTheFourDifferentScales"
    sizes="(min-width: 1200px) 50vw, 30vw"
/>

I'm aware of the different query variables such as width or maxWidth and the fluid vs fixed types, however should I just serve the @4x image and expect Gatsby to do the heavy lifting for me ? Not sure how the sizes attribute could be translated neither.

On the docs it states

Generate multiple smaller images so smartphones and tablets don’t download desktop-sized images

So I guess only serving the @4x image is fine, but what about the sizes attribute ? I guess if I set the image type to fluid it could handle it ?

Thank you very much !

[LekoArts]

So I guess only serving the @4x image is fine, but what about the sizes attribute ? I guess if I set the image type to fluid it could handle it ?

Exactly. The sharp documentation also explains it a bit.

Take your @4x images, query them by GraphQL (with fluid and the right maxWidth & quality setting), pass that to your <Img fluid={your.query.fluid} /> (gatsby-image) and it handles everything for you.

[enzoferey]

Love it ! Such a nice framework 😍

Thank you and have a nice day 🚀