Is there a way to load images dynamically in nextra?

[Gitstar-OC]

Hey, Everyone I am building a docs website for my project and in that project there are a lot of images like 30 to 40 images per mdx file and loading them statistically will cause too much time and the website will not load as fast as intended. Can load the images dynamically ( loading them on server ) and then lazy loading only the images which is in the viewport of the user ? Does Nextra support that ? If now could anyone tell me a possible way to do that ?

[eliot-akira]

lazy loading only the images which is in the viewport

This is a feature of the img element.

<img src='/example.jpg' loading=lazy />

Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading

Now, how to add this attribute to all images on a page.. Every image in an MDX file gets transformed into an Image component provided by Next.js.

• Next.js: Building Your Application > Optimizing > Images
• Nextra: Guide > Image

The Next.js Image component extends the HTML <img> element with features for automatic image optimization:
...

• Faster Page Loads: Images are only loaded when they enter the viewport using native browser lazy loading, with optional blur-up placeholders.

So this is already the default behavior, how convenient.

[Gitstar-OC]

Thanks for replying!!