Speedup loading non-critical gatsby-image components on the initial page load

[KyleAMathews]

We use a react component gatsby-image to power our responsive and lazy loading image behaviors. But this method does have one big downside, that it relies on the main js bundle to be loaded before images will start downloading. This can lead to late loading images especially on slow connections or mobile.

We added the critical prop for this sort of thing but that requires manual adjustment (which we always want to avoid) and doesn't help in cases where js is very slow.

To fix this, we could embed in the the same (or similar) logic for initializing the lazy loading of images so that images start loading immediately when the page renders.

We can have our js enabled lazy loading cake and eat it too ;-)

[DSchau]

Also see the RFC

[KyleAMathews]

@DSchau this is unrelated to the RFC actually — critical images are already loaded without JS. This is so non-critical images that are in the viewport start loading before the JS is active.

[smurrayatwork]

Would the code from prefetch.js in the gatsby package cache directory help with this?