Custom sizes attribute with gatsby-image (by a Gatsby newbie)

I’ve been working on my first Gatsby project recently: a headless WordPress blog!

I love all the smartness Gatsby gives you out of the box and how optimized for performance it is. For example, these are some of the things the gatsby-image component takes care of:

• Image optimization
• Lazy loading
• Base64 encoded placeholders

Very nice indeed! And easy to use to:

<Img fluid={post.featured_media.localFile.childImageSharp.fluid} />

How to change the sizes attribute?

But one thing I struggled with at first was how to customize the sizes attribute. I thought it could be set using an attribute/prop on the <Img /> component, but that didn’t work.

Instead, it turned out I should add the sizes attribute value to the GraphQL query:

I guess it still would be nice to be able to set the attribute on each <Img /> component since the sizes value might be different depending on the template, but for now: mission accomplished! 🤗