Update gatsby-image to gatsby-plugin-image #58

[vadikmash]

Closes #58.

Fully migrated to gatsby-plugin-image. Everything seems to look exactly as before, except for new beautifully animated image loading. I've highly simplified Image component, so you should probably take a closer look and decide, whether it was a right thing to do.

[iamakulov]

I've highly simplified Image component, so you should probably take a closer look and decide, whether it was a right thing to do.

That’s great, thank you! gatsby-image didn’t work well with gatsby-plugin-no-javascript which was the reason we needed a custom image implementation. gatsby-plugin-image seems to work with gatsby-plugin-no-javascript perfectly, so this is a really nice improvement.

[iamakulov]

gatsby-plugin-image seems to work with gatsby-plugin-no-javascript perfectly, so this is a really nice improvement.

Gah, no, it actually doesn’t. In Safari, images stay invisible.

Why?

The way the new `gatsby-plugin-image` works is it generates a bunch of inline scripts that load the image: and add a nice transition when the image loads: For some reason, these scripts bail out early and don’t run if the browser doesn’t support native image lazy loading. (See `const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){...}` in the beginning of each script.) Safari doesn’t, so these scripts don’t run, and images stay invisible. On a typical site, I presume, what happens next is the bundle loads, fixes these images, and makes the browser load them even in Safari. However, because we use `gatsby-plugin-no-javascript`, no bundle loads, and no images are fixed.

I suggest to revert back to a custom <Image> implementation. Gatsby’s one still brings more issues than it solves :/

[iamakulov]

@vadikmash Heya – let me know if you need any help with finishing this! (Don’t hesitate to reach out if you feel stuck.)

Re: webp in Safari – I’m actually comfortable with using webp there. Safari supports it as of v14 (and macOS Big Sur), and I don’t care much about older OSes/versions.

[vadikmash]

Hey! I've updated new code to be compatible with gatsby-image-plugin. Good news. It looks like GatsbyImage implementation works correctly in Safari now! All images are visible.

[vadikmash]

Soo.. I've fixed all the issues. Had to apply some inline styles to GatsbyImage component, which were the only way to properly style image container and image itself according to documentation (replacing div container element with span did not help). Hope that this solution is acceptable :)

[iamakulov]

This is wonderful ⚡ Thank you!