[Feature]: Refactor gatsby-image to be more composable and flexible

[polarathene]

Summary

Refactor of gatsby-image into smaller composable components due to it's growing size and features.

The standard component in it's current form could still be offered as default, along with variants that allow for users to benefit from features of this component without meeting the current expectations for input.

Motivation

gatsby-image is a great component and often hyped feature of Gatsby.

It's unfortunately afaik, mostly only usable/functional at build time by accepting a fluid or fixed data object. This is due to the desirable features of automated size variants(and in future art-direction support via content variants too) and optimizations, along with using the image data for certain placeholders.

While those are often desirable features, some users would like to provide a single remote URL as source direct to the component without the build time processing/benefits that plugin/transformers may offer. This allows them to still benefit from certain placeholders like bg colour, as well as the lazy-loading support and fadeIn transition(cancelled if detected in browser cache).

Breaking up gatsby-image would allow to serve the same great component we have today by default, while offering up some variants for more niche use-cases, or the sub-components/features themselves(perhaps with the React Hooks API?) for users to compose their own variants.

This would be useful for features from the community that would otherwise be dismissed due to concerns of feature creep in the current iteration.

Considerations

If there React Hooks are used at all, the minimum version of React required would be 16.7. That'd bump the major version which may also mean waiting until Gatsby v3?(should such a change be done before release or would it be ok after v3 release?)

NoScript had been converted to be handled as a string due to a bug in React, but that has since been fixed since 16.6. This would be a good opportunity to convert it back into a regular component if the minimum version of React can be enforced.

[wardpeet]

Thanks for creating this issue! We probably wait until we start working on gatsby v3. We're mostly waiting for react suspense SSR & webpack 5 release. Which makes it possible to bump all our versions.

[LekoArts]

Thanks for this initial issue and the work you did to the plugin in the past. As you have probably already seen, there are two new RFCs you can read through (interesting for everyone who finds this issue here):

gatsby-plugin-image: #27950
image helpers: #28241

Particularly the latter one allows for even more customisability. Thus I'll close this one here, one can follow the process there :)