I'm trying to handle the retina images in a Gatsby project. My content provider is Contentful. I'm uploading the 2x images. I'm currently using the Gatsby-images plugin. To get the correct image I'm using:
images{
fluid{
...GatsbyContentfulFluid_withWebp
}
}
I also using the tag that supposes to handle retina images.
<Img fluid={image.fluid} alt="" class="mw-100 d-inline-block" />
But.. at the end of the day. I'm getting the wrong images.
I'm getting the 800w so It seems that I'm getting one breakpoint behind the image.
I've solved the issue. There were two issues, by default Gatsby Plugin Sharp (https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/) uses quality 50 and maxWidth 800px. I just update qualify 100 and maxWidth of 2500 since I was waiting for bigger images.
fluid(maxWidth: 2500, quality: 100){
...GatsbyContentfulFluid_withWebp
}