How should I specify to resize images only to lower resolutions?

[alexrintt]

The problem is pretty simple:

Current behavior

Given the image of size 800x800

• Plugin options:

  • maxWidth set to 1920.

• Output srcSet:

  • Multiple sizes: 200, 300, 400, ..., 800, 900, ..., 1920.

Expected behavior

Generated srcSet of 200, 300, ..., 800 (Should stop here) the max width is greather than the image size, there's no reason to resize the image since it will only make it blurry due to quality loss.

Question

There's some way to achieve this? Should I rely to the other plugins to achieve this? e.g gatsby-plugin-sharp or gatsby-transformer-sharp?

Thanks in advance!

Edit 1:

I found this another plugin which doesn't seems to have this issue and in this comment line it mentions:

Filter out any responsive image fluid sizes that are greater than the image's width

https://github.com/icaraps/gatsby-remark-images-remote/blob/master/src/index.js#L27

It seems to be the exactly step we're missing here. Let me know if it's helpful or if I'm missing something.