Gatsby: Different image sizes problem with gatsby-transformer-sharp

[wiched]

Hey guys,

I am trying to optimize my website with Gatsby and gatsby-transformer-sharp.
my images are resizing on mobile but on a desktop, the image is not contained in the container and its full size and breaking everything.
I am on gatsby v2.

Relevant codes:

   const { data } = this.props
    const webdev = data.fluidImages.childImageSharp.fluid

```
query {
allImageSharp {
edges {
node {
... on ImageSharp {
fluid {
src
}
}
}
}
}
fluidImages: file(relativePath: { regex: "/web-development/" }) {
childImageSharp {
fluid(duotone: { highlight: "#f00e2e", shadow: "#192550" }) {
base64
aspectRatio
src
srcSet
sizes
}
}
}
}

 ```
<Col md={3} className="col__order-development">
                  <article>
                    <div className="inner-block">
                      <figure className="page1-img1">
                        <a
                          rel="bookmark"
                          href="/uslugi/izrabotka-na-sait"
                          className="link1"
                        >
                          <picture>
                            <source
                              srcSet={webdev.srcSet}
                              sizes={webdev.sizes}
                            />
                            <img alt="Изработка на уеб сайт" src={webdev.src} />
                          </picture>
                          {console.log(webdev)}
                        </a>
                      </figure>
                      <h3>
                        <a
                          rel="bookmark"
                          href="/uslugi/izrabotka-na-sait"
                          className="link1"
                        >
                          Web Development
                        </a>
                      </h3>
                      <p className="p6">
                        Lorem ipsum dolor sit amet
                      </p>
                    </div>
                  </article>
                </Col>

https://www.prettystyle.store/services/ - live build url

Project repo: https://github.com/wiched/gatsby
Best regards

[stefanprobst]

Any reason you're not using gatsby-image?

[wiched]

I've tried to use
<Img fluid={fluidImages.childImageSharp.fluid} /> instead of
<img src={data.fluidImages.childImageSharp.fluid.src}/>

and I get

Uncaught TypeError: Cannot read property 'src' of undefined

I can console the fluidImages.childImageSharp.fluid without a problem and use the src for normal image tag but on a gatsby-image component, I get src of undefined.

[stefanprobst]

You are using gatsby v2, but the v1 version of the plugins. Try with yarn add gatsby-image@next gatsby-plugin-sharp@next gatsby-transformer-sharp@next

[stefanprobst]

Also make sure your .link1 class has display: block

[wiched]

You are right, gatsby-image was v1 I updated it to next.

The image is shown, its contained in the container but it uses full size of image instead of the one closest to the container.

I see that there is a size that is 300w and its not used, it uses the 500w (full size)

I updated the build on the link.

P.S. I appreciate the help!

[wiched]

I did what I could - https://www.prettystyle.store/services/

It is contained properly but it uses a bigger size that it should.
The container is close to 300px and there is 300w size from the srcSet but it doesn't use that, it uses the bigger size 500w

[stefanprobst]

gatsby-image seems to set sizes="(max-width: 500px) 100vw, 500px", which means that for viewports wider than 500px the 500px version of the image will always be chosen. Now, because you have a 3-column layout you could adjust sizes to reflect that.

[wiched]

Sizes are generated from the gatsby-image tag, right?

I tried to add sizes to the Img component but I get an error that it expects to be an object.
I created a variable and copied the sizes, aspectRatio, src and srcSet and modified them and it works, but do I have to do that for all images?

This seems like a lot of work for something that appears to be automatic, or am I doing something wrong?

[stefanprobst]

I think there unfortunately cannot be a "one size fits all" solution for responsive images - srcset/sizes is one of the (necessary) places where styling bleeds into html. Think of it more like css and media queries - those have to be adapted to different page layouts too.
What should work is something like:

<Img
  fluid={{
    ...data.file.childImageSharp.fluid,
    sizes: `(max-width: 500px) 100vw, (max-width: 1600px) 33vw, 500px`
  }}
/>

or pull sizes out into its own variable to reuse it:

const sizes = `(max-width: 500px) 100vw, (max-width: 1600px) 33vw, 500px`
<Img fluid={{ ...data.file.childImageSharp.fluid, sizes }} />

[wiched]

Okay i think I get it now, thank you for the help stefanprobst, I think this issue will be helpful to others as well.

Thanks again and best regards