Gatsby: fluid images with srcSetBreakpoints: unnecessary images generated

[schoeneu]

Summary

We are creating fluid images with gatsby-image/sharp with original images of dimension 1440x700. We configured maxWidth: 800 and maxHeight: 640, and a single srcSetBreakpoint: [800].

When gatsby runs, it creates an 800x640 image as requested, but also a 1440x1152 image. This does not make sense to me as it's larger than the requested maxWidth.

The comment in https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-sharp/src/index.js#L387 says that it's there to "to ensure the largest image possible is available for small images". I don't understand - if I specifically set maxWidth, why does gatsby create a larger one?

Thanks!

[ascorbic]

I agree that this is questionable behaviour, particularly if the user has specified breakpoints explicity. If the user wants the original image then they can easily get it, so it needn't be added automatically. Also, it doesn't just copy the image. If the query includes other formats such as WebP then it recompresses the full-res image too.

[schoeneu]

Thanks, that was my impression as well.
It's especially weird if I have very high-res source images but only need smaller ones for the pages (specified by breakpoints), because then I get all of the original large high-res images in the build result and the build result becomes much larger than needed.

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[schoeneu]

I don't think this is stale. What would be a good way to progress with this?

It seems to me that the line that adds the original size could just be removed, but I can't decide what it would break...

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[decimoseptimo]

Also lighthouse may throw Properly size images warnings. When the srcset includes an aditional breakpoint (with the original image, at a larger size), that you're not inteded to publish.

This has been asked before.

[ascorbic]

I'd be happy to look at a PR that changes this

[alimoosavi15]

If you only need one image size, you can use resize instead of fluid.

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜