Gatsby: Reduce default image thumbnail sizes and add option to set srcSetBreakpoints for gatsby-remark-images

[humphreybc]

Problem

We are running into memory issues generating thumbnails during our build, similar to the problems described in this issue. We have only ~150 or so images in our project, yet ~2,500 thumbnails are being generated during the build and causing a SIGSEGV error.

Cause

By default Gatsby generates 0.25x, 0.5x, 1x, 1.5x, 2x, and 3x sizes of thumbnails, which I feel is a little over the top. When you use GatsbyImageSharpFluid_withWebp, sometimes you will get up to 28 thumbnails generated for every one image in your project!

Suggestion

gatsby-plugin-sharp has a useful parameter on fluid called srcSetBreakpoints (described here) which lets you override these defaults, so you could pass in srcSetBreakpoints and only generate three sizes (0.5x, 1x, and 2x), greatly reducing the number of thumbnails generated.

Unfortunately I can't see any way to do this with gatsby-remark-images, which is still generating a tonne of image thumbnails for every one image in our blog posts.

I suppose I have two feature requests:

1. Simplify the default sizes set down from 6 sizes to 3 sizes.
2. Update gatsby-remark-images to take a srcSetBreakpoints option.

[tanaypratap]

@wardpeet from the description this looks like we need to provide a config option to the plugin. I can take this up and send a PR. It would be great if you can assign this to me. Expect a WIP PR by the end of this week.

[wardpeet]

That's correct, we'll have to add options to the gatsby-remark-images plugin. That sounds great @tanaypratap

[gatsbot[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!

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

[tanaypratap]

Not stale. Started working on it.

[gatsbot[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!

[tanaypratap]

Not stale.. I have been working on this. Will send a PR anytime this week.

[gatsbot[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/contributefor more information about opening PRs, triaging issues, and contributing!

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

[tanaypratap]

not stale. The PR is ready. I'll send it very soon.

On Mon, Jun 3, 2019 at 10:58 PM gatsbot[bot] [e-mail]
wrote:

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
https://www.gatsbyjs.org/contributing/how-to-contribute/for more
information about opening PRs, triaging issues, and contributing!

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

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/gatsbyjs/gatsby/issues/12857?email_source=notifications&email_token=ACN6LH4CLFJG2QL7SPUTSMDPYVIC3A5CNFSM4HBK7ZJKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODW2DU5I#issuecomment-498350709,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACN6LH76NA4IJNQYGMF3DULPYVIC3ANCNFSM4HBK7ZJA
.

[Devin-Chaves]

not stale. The PR is ready. I'll send it very soon.

Sir?

[Mrazator]

not stale. The PR is ready. I'll send it very soon.

It's been another month, please tell us @tanaypratap, what are the issues you are facing?

[tanaypratap]

No issues. I am sorry that I was able to send the PR. Kindly give me
sometime. I'll send it as soon as possible.

On Mon, 5 Aug, 2019, 3:43 PM Mrazator, [e-mail] wrote:

not stale. The PR is ready. I'll send it very soon.

It's been another month, please tell us @tanaypratap
https://github.com/tanaypratap, what are the issues you are facing?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/gatsbyjs/gatsby/issues/12857?email_source=notifications&email_token=ACN6LH6UZU53ESQRV7UIFB3QC74KZA5CNFSM4HBK7ZJKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD3RLQJI#issuecomment-518174757,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACN6LH5R3RHFAZ5Y4FCKXX3QC74KZANCNFSM4HBK7ZJA
.

[vpicone]

@tanaypratap If you're not able to tackle this one right now, maybe allow someone else to give it a shot?

[StevenZoo]

Hey @humphreybc ,

I'd be happy to work on this. I was thinking I would add the srcSetBreakpoints option to gatsby-remark-images, but leave the defaults until we have more discussion on the topic.

General Questions

From the docs in the fluid section of gatsby-plugin-sharp:

fluid

Create fluid sizes (in width) for the image. If the max width of the container for the rendered markdown file is 800px, the sizes would then be: 200px, 400px, 800px, 1200px, 1600px – enough to provide close to the optimal image size for every device size / screen resolution.

If I'm reading this correctly, we are creating images that are larger than the max-width of the container? That seems unnecessary, but I'm probably missing something - if someone could clarify on why fluid behaves the way it does, that would be appreciated.

Secondly, could someone elaborate on why having multiple thumbnail sizes is useful? I can imagine wanting smaller sizes of an image, but don't understand when we want to increase the size of the image. Wouldn't the image quality decrease?

[humphreybc]

@StevenZoo I believe it generates images larger than the size of the container for retina devices (@1.5x and @2x). In your example, the original image might be 4000px wide, so it'll generate a 1600px image for the 800px container (@2x). The generated image is not larger than the original image, but it is twice the size of the container.

[StevenZoo]

@humphreybc , thank you, that makes a lot of sense! (Didn't realize I had turned email notifications off, hence the late reply heh.)

I am hoping to make a PR by Sunday.

In the meanwhile though, I looked through the code, and it appears that the options passed to gatsby-remark-images get forwarded to gatsby-plugin-sharp. I know the docs don't suggest this, but I think you may be able to pass srcSetBreakpoints to gatsby-remark-images and get your desired result.

I'll look into this more later this week!

[StevenZoo]

I currently have a test and documentation update ready. I believe passing secSetBreakpoints to gatsby-remark-images does indeed work.

However, I wrote a test that uses an existing mock of the module gatsby-plugin-sharp. If I comment out this mock, my test works as expected, but when I use the mock, I do not get expected results. It behaves as if I do not pass in srcSetBreakpoints at all.

I tried to update the dependency on gatsby-plugin-sharp, but it did not help.

My changes are available here.

If anyone would like to replicate, please run the srcSetBreakpoints test added at the bottom of the file twice - once as is, and once with the mock gatsby-plugin-sharp commented out.

Otherwise, I am about ready to make a PR, but am stuck on the mock not behaving as expected.

[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! 💪💜

[alexfornuto]

The issue persists even if the GitHub issue has gone quiet. It would be swell if someone could pick up where @tanaypratap left off at #16525. I'd offer to look at it myself, if I felt qualified in any way shape or form, which I do not.

[manindr]

Talked with @tanaypratap and i've decided to take this on. New to Gatsby so might take few days to send out this PR. Please assign the issue to me.

[manindr]

So looks like you can already pass srcSetBreakpoints to gatsby-remark-images and it would work. It's just that there's no documentation for it.
See latest docs here: https://www.gatsbyjs.org/packages/gatsby-remark-images/

I tested it on a gatsby starter : https://github.com/greglobinski/gatsby-starter-personal-blog

It was also generating 6 thumbnails for one image as mentioned in the original issue.
When i changed the gatsby-remark-images plugin config as following, it only generated three thumbnails. See the srcSetBreakpoints option.

I'm not the best person for adding documentation but if you want i can try.
I'm not sure about whether we should add tests for it because this option is used by gatsby-plugin-sharp.

 {
  resolve: `gatsby-transformer-remark`,
  options: {
    plugins: [
      {
        resolve: `gatsby-remark-images`,
        options: {
          maxWidth: 500,
          srcSetBreakpoints: [200, 500],
        },
      },
      {
        resolve: `gatsby-remark-responsive-iframe`,
        options: {
          wrapperStyle: `margin-bottom: 1.0725rem`,
        },
      },
      `gatsby-remark-prismjs`,
      `gatsby-remark-copy-linked-files`,
      `gatsby-remark-smartypants`,
    ],
  },
}

[alexfornuto]

@manindr documentation is easier than you think. If you want to take a stab at adding the documentation you think is needed, tag me on the PR (I'm a tech writer) and I'll test the solution and validate the docs.

[manindr]

@alexfornuto Alrighty then. Give me a day. I'll send out a PR.

[manindr]

@humphreybc Just to let you know that you can solve your problem right now as well.