feat: lazy-load external images + ability to customize image display

[slorber]

Motivation

Fix #6965

Apply MDX image default lazy-loading from MDXImg component instead of the Remark transform

cc @johnnyreilly

This makes it possible for the user to more easily change the lazy-loading config on a case-by-case basis thanks to swizzling

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

Preview works and lazy-load images

Related PRs

Revert #6598

[netlify]

✅ [V2]

Name	Link
🔨 Latest commit	c1f5e38
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/623cb889eaa9440009e13426
😎 Deploy Preview	https://deploy-preview-6990--docusaurus-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[github-actions]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🟠 Performance	53
🟢 Accessibility	100
🟢 Best practices	92
🟢 SEO	100
🟢 PWA	90

Lighthouse ran on https://deploy-preview-6990--docusaurus-2.netlify.app/

[github-actions]

Size Change: 0 B

Total Size: 805 kB

ℹ️ View Unchanged

Filename	Size
website/.docusaurus/globalData.json	49.9 kB
website/build/assets/css/styles.********.css	105 kB
website/build/assets/js/main.********.js	612 kB
website/build/index.html	38.3 kB

_{compressed-size-action}

[johnnyreilly]

I might be reading this wrong, but the snapshots seem to suggest that this removed lazy loading? Am I misunderstanding?

[Josh-Cena]

This has moved the addition of loading="lazy" from the Remark plugin to the MDXComponents provider which kicks in when the loaded MDX is being rendered. The final markup still contains loading="lazy":

IMO this is better, because it also means the user can easily opt-out of lazy loading through swizzling.

[johnnyreilly]

Okay cool!