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

This is Part 3 of a three-part series covering the Gatsby plugin gatsby-image
Part 1: Graphql, generated files & markup
Part 2: Responsive images 101
Part 3: Controlling src-set, breakpoints and styling

In Part 1 we've learned what gatsby-image is outputting, in Part 2 we learned the basics of responsive images in order to understand what gatsby-image is outputting. In this part we're going to learn how to tweak what gatsby-image is outputting in order to get the images that serve our use case.

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

If you’re dealing with a fixed image it is producing a src-set with a width-descriptor appended to each source (e.g. 600w)

"srcSet": 
 "/static/1234/1111/my-image.jpg 600w, 
  /static/1234/2222/my-image.jpg 900w”

In the case of a fluid image it is producing a src-set width a x-descriptor appended to each source (e.g. 1.5x)

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

Gatsby Image: What sizes property does it generate?

This only applies to fluid images. Fixed images don’t have a size property, because they use x-descriptors in their srcSet property.

Gatsby image just takes the sizes property from what gatsby-plugin-sharp is outputting. Remember, in Part 1 we showed how the fragment GatsbyImageSharpFluid includes a size property.

If you haven’t indicated a maxWidth in your graphql query it will generate:

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

If you have indicated a maxWidth of 1200px, it will look like this:

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

You can see here that the 100vw is based on the assumption that your image will take up the full available viewport width. It doesn’t take into account that your full-width image might be smaller because it’s living in a container with paddings and margins.

Setting custom sizes and breakpoints

But you can adjust that to your needs, by overriding the sizes property in the object you pass to the fluid property of your gatsby image. In case your image lives in a container that has a margin of 20px on each side, you can substract 40px from the viewport width:

<Img
  fluid={{
    ...img.image,
    sizes: "(max-width: 1200px) calc(100vw - 40px), 1200px",
  }}
/>

This way you don’t load images that are much bigger than what you really need. You might also want to override the sizes property to add additional breakpoints:

sizes: "(max-width: 300px) calc(100vw - 20px), (max-width: 600px) calc(100vw - 40px), 1200px",

Another technique for overriding sizes is to include your custom sizes as a query parameter in your graphql query, like in this example:

childImageSharp { 
  fluid(sizes: “(max-width: 1200px) calc(100vw - 40px), 1200px”){ 
   ...GatsbyImageSharpFluid
  } 
}

Controlling which image sizes are generated

If you want more control over which image sizes are generated by gatsby-plugin-sharp you can use the srcSetBreakpoints parameter in your fluid query. This could be an array like [200, 350, 900]. You probably want to use this in combination with a custom sizes property in the gatsby-image React component, as described above. This way you can refer to concrete numbers in your sizes property.

Checkout the documentation of gatsby-plugin-sharp here: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp#parameters-2

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

We’ve covered the markup and layout that gatsby-image creates in the first Part 1 of this series.

Gatsby image accepts the following properties related to styling:

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

Here’s an interesting discussion of how to apply custom styling to a gatsby image.

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

Comments

[asdf-codes]

Hey! <3 the content, especially someone like me who is just starting out. It seems like Gatsby image mostly relies on width when displaying an image. How would one go about setting a max-height and leaving max-width the same?

[Alexa Steinbrück]

Oh, you can also just pass max-height in the style property (might add an !important to it too), haven't tested it yet..

[Alexa Steinbrück]

Hi! If you want to change the height of the image you could give the element a style property and set a paddingBottom property. Hope that helps!