[sharp & remark-images] Generating unused images?

[LekoArts]

Hi,

when I first used gatsby-plugin-sharp respectively gatsby-image and gatsby-remark-images I didn't pay much attention to the details of these packages and how they generate images.
My personal site is still pretty small but I'm already generating 600 images and I first didn't understand why. Someone showed me these lines:

gatsby/packages/gatsby-plugin-sharp/src/index.js

Lines 427 to 434 in c147a08

	const sizes = []
	sizes.push(options.maxWidth / 4)
	sizes.push(options.maxWidth / 2)
	sizes.push(options.maxWidth)
	sizes.push(options.maxWidth * 1.5)
	sizes.push(options.maxWidth * 2)
	sizes.push(options.maxWidth * 3)
	const filteredSizes = sizes.filter(size => size < width)

I'm using the sizes queries for gatsby-image and gatsby-remark-images is using it automatically. It says:

Create 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: 200, 400, 800, 1200, 1600, 2400 – enough to provide close to the optimal image size for every device size / screen resolution.

For a fluid container this perfectly makes sense.

Example:
You have a full-width hero image/header and define a maxWidth: 2560 for the images (e.g. you know that most of your users use monitors smaller than that). People with bigger screens might see the header and therefore also 2x and 3x versions are fine.

But here comes the problem:

What if the maxWidth is actually the max-width of the container? It's absolutely common to have blogposts at width of ~ 800px to improve readability. You set maxWidth in gatsby-remark-images to 800 and everything is fine? In my opinion not!
If you're already using bigger images and/or want to reduce the amount of images that's a problem.

Example:
https://upbeat-edison-0598aa.netlify.com/marion-michele
I set the maxWidth in gatsby-remark-images to 1600 (it also applies to sizes query for a component) as the image will never be bigger than 1600px.
But why don't you use resolutions ? (which creates 1.5x, 2x ... versions of the image)
Because I don't want to serve 1600px images to mobile users.

Here's what gatsby-remark-images generates:

<img class="gatsby-resp-image-image" style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;" alt="matt safian" title="" src="/static/123.jpg" srcset="/static/123.jpg 400w,
/static/123.jpg 800w,
/static/123.jpg 1600w,
/static/123.jpg 2400w,
/static/123.jpg 2560w" sizes="(max-width: 1600px) 100vw, 1600px">

If I don't want to serve images for retina OR think that the maxWidth already is enough the last to images would be unnecessary.

---

Am I completely mistaken here with my assumptions?
I know: It's an edge case.

So my proposal would be:
Adding an option to exclude the generation of 1.5x, 2x etc. to minimize the amount of generated images.

[LekoArts]

Closing this issue for now. Seems to be an edge case.
If I have time I'll do a PR for an option to remove the 1.5x, 2x etc.