Understanding gatsby-image (Part 3): Controlling sizes, breakpoints and styling

Gatsby Image: What src-set property does it generate?

"srcSet": 
"/static/1234/1111/my-image.jpg 600w,
/static/1234/2222/my-image.jpg 900w”
"srcSet": 
"/static/1234/1111/my-image.jpg 1x,
/static/1234/2222/my-image.jpg 1.5x,
/static/1234/3333/my-image.jpg 2x”

Gatsby Image: What sizes property does it generate?

sizes="(max-width: 800px) 100vw, 800px"
sizes="(max-width: 1200px) 100vw, 1200px"

Setting custom sizes and breakpoints

<Img
fluid={{
...img.image,
sizes: "(max-width: 1200px) calc(100vw - 40px), 1200px",
}}
/>
sizes: "(max-width: 300px) calc(100vw - 20px), (max-width: 600px) calc(100vw - 40px), 1200px",
childImageSharp { 
fluid(sizes: “(max-width: 1200px) calc(100vw - 40px), 1200px”){
...GatsbyImageSharpFluid
}
}

Controlling which image sizes are generated

Ways to style/layout the image created by gatsby-image

style={} /* styles for the wrapper container */
imgStyle={} /* Styles for the actual img element */

👉 That was the 3-part series about gatsby-image. I hope it was helpful!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alexa Steinbrück

Alexa Steinbrück

A mix of Frontend Development, Machine Learning, Musings about Creative AI and more