[gatsby-image] Support image loading with JavaScript disabled

[kripod]

I think that by default, images' src, srcSet and other attributes should be set to the final displayable image instead of e.g. an image with a width of 20 pixels.

If JS is enabled, change to the preview image immediately until the final image is available.

[KyleAMathews]

There's no way afaik to tell the browser to delay loading an image unless we don't render the img element in the HTML.

I'm not sure any image lazy loading technique works with JavaScript disabled.

[kripod]

I think that the noscript tag could be used to display the entire image instead of using a preview.

[KyleAMathews]

Ahhhhhh!!!! Yes! Of course! Could you put together a PR adding this?

[kripod]

I’ll try my best to do so as soon as I’ll have some free time 😊

[aderaaij]

Would this be achieved by something like adding

_react2.default.createElement("noscript", {},
  _react2.default.createElement("img", {
    alt: alt,
    title: title,
    src: image.src,
  })
),   

to the index.js of gatsby-image?

edit: after some tinkering I've discoverd it's not quite that easy. When I add this to the creation of a sizes image for testing, and run a production build and have javascript enabled, I do get an error. I'm going to leave this to smarter people for now, before I'm lost in the rabbithole.

[kripod]

I have already created a pull request which solves the issue (tested on the latest version of Firefox).

[aderaaij]

👌 that's awesome, thanks! Does it also prevent the base64 or tracedsvg image from showing up?

[kripod]

@aderaaij With Firefox, the base64 / traced SVG image is shown until the original gets loaded.