Lazy load for gatsby-remark-images

[humphreybc]

Summary

Out of the box, Gatsby does a good job of lazy loading images below the fold through gatsby-image. However, gatsby-remark-images doesn't appear to do this, which results in “Defer offscreen images” complaints from Lighthouse when testing a Markdown-generated page.

It would be nice if gatsby-remark-images added lazy loading so that images below the fold are not loaded until the user scrolls down the page. Bonus points if support for the new Chrome native lazy loading API was extended to gatsby-remark-images too.

Previous work

There's been an attempt to add lazy-loading to gatsby-remark-images in this plugin. However it doesn't seem to work very well, and requires an external dependency in lazysizes. It would be better if this functionality was built into gatsby-remark-images like it is with gatsby-image.

Another relevant issue: #2288

Motivation

Improve the performance for Markdown-generated pages.

[sidharthachatterjee]

Thank you for opening this @humphreybc

We'd love to accept a pull request porting the lazy load implementation over to gatsby-remark-images

Marking this as help wanted for the moment!

[humphreybc]

@sidharthachatterjee If you could drop a link to the relevant code in gatsby-image, I could take a look and see how difficult it would be to port to gatsby-remark-images. The Chrome stuff is just adding an attribute to the HTML tag, so that should be pretty easy.

[marcel0ll]

@humphreybc have a look at gatsby-image, it uses IntersectionObserver to 'defer image loading'.

gatsby-image
mdn:IntersectionObserver

[gatsbot]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contributefor more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[sidharthachatterjee]

gatsby-remark-images@3.1.10 supports native lazy loading thanks to @gabefromutah 🥇