How to set srcSetBreakpoints on Gatby images Contentful

Question

I'm currently working in order to improve page speed. One of the feedback from Google was Properly size images. I'm using ContentFul as an image provider. I'm looking for a way to manage the srcSetBreakpoints. I added the maxWidth and Quality but Goggle is still showing me the Properly size images. So I'm thinking to manage the breakpoints. Is there any way to added into the contentFul query?

  fluid(maxWidth: 1000, quality: 100){
    ...GatsbyContentfulFluid_withWebp_noBase64
  }

Answer 1

I've noticed that when the maxWidth parameter is used in the query, Contentful does not return all the possible image sizes in srcset. Try to remove it and run the query:

fluid(quality: 100){
  ...GatsbyContentfulFluid_withWebp_noBase64
}

Then you should define which image size to use for which media condition via the sizes param, for example:

fluid(sizes: "(max-width: 800px) 200px, (max-width: 1200px) 400px, 1200px") 
  ...GatsbyContentfulFluid_withWebp_noBase64
}

Please see the img documentation and responsive image tutorial for more info