Lazy loading images in blog posts by default
complete
John Reilly
Could we consider using the
loading
attribute on blog post images to make use of native lazy loading of images in browsers? Support is good: https://caniuse.com/loading-lazy-attrAnd implementation is purely down to the additional
loading
attribute.
Joshua Chen
complete
Joshua Chen
under review
Joshua Chen
Looks cool with me. Several thoughts:
- We have the ideal image plugin that uses the intersection observer to determine whether images should be loaded and should achieve roughly the same effect. Maybe if the plugin is installed, all ![]()syntax should be interpreted as ideal image components?
- Although this isn't supported everywhere, seems it won't be problematic if some browsers don't support them (extra attrs are ignored)?
- Maybe not everyone wants this. and we want to make the loading behavior configurable in our transform-image remark plugin (see https://github.com/facebook/docusaurus/issues/5999)?
John Reilly
Joshua Chen:
> We have the ideal image plugin that uses the intersection observer to determine whether images should be loaded and should achieve roughly the same effect
I did some experimentation with the ideal image plugin, and as far as I can tell - it doesn't operate on blog posts. This is my site - https://blog.johnnyreilly.com/ - do tell me if you're seeing different behaviour
I did some experimentation last night and think I put together a rehype plugin that I think implements the desired behaviour. I need to do some testing on it. Never written a rehype plugin before.
Could this be implemented in the remark plugin? Do you have a link to it? From my fiddling last night I was using rehype as that appears to be HTML - wasn't sure which knobs to turn for remark which I think is MDX?
Joshua Chen
John Reilly: So we do have a transform-image plugin that converts all image relative paths to
require()
calls. The code is here: https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-mdx-loader/src/remark/transformImage/index.ts I think if you want something meaningful done on your side using a remark/rehype plugin, you would have to duplicate the entire code, since after our transformation, the image nodes are converted to jsx nodes already and can't be easily processed further down the line.As for your attempt, very interesting😄 I think it works!
For the ideal image plugin, as for now, it doesn't work on
![]()
syntax, but only if you use the @theme/IdealImage
component. cf docs: https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-ideal-image#usageJohn Reilly
Joshua Chen:
> For the ideal image plugin, as for now, it doesn't work on ![]()
syntax, but only if you use the @theme/IdealImage component.
I'm using the
![]()
syntax in my blog posts and the ideal image plugin doesn't seem to have any effect. Does that sound right? Looking at the transform image code, I can see in there where you'd set loading=lazy. Is that something that would be welcome as an addition do you think?
Prospective PR: https://github.com/facebook/docusaurus/pull/6598