gatsby-plugin-image: Support for different image resolutions (@2x)

[CodeAndWeb]

This is a screenshot taken on my iMac:

The special thing about it has the size of 962x702 pixels but it should only be rendered with a maximum size of 481 pixels. Github automatically restricts it to that width which is why it is displayed correctly.

gatsby-plugin-image ignores the size and renders it this way:

The pixel density might be acquired from the image itself - but I'd personally prefer a way where the scale factor would be specified as part of the file name: E.g. [email protected] - in this case it would be possible to use art-direction to have the same screenshot in low-res with screenshot.png. This is what macOS is doing with different resolutions: https://developer.apple.com/design/human-interface-guidelines/macos/icons-and-images/image-size-and-resolution/

[ascorbic]

Hi. We would consider a new feature to extract this from metadata, but right now this is expected behaviour as it uses the pixel size. If you want it displayed smaller then set a maxWidth on the image. It will still include the larger source, which would be used for high-res screens.

[CodeAndWeb]

This means that I have to lookup the size for every image... not exactly what I would like to do.
It even gets worse when using MDX files...