Lazy image loading

[jerry.nummi]

An option to specify lazy image loading would be great.

Something like this:

And the output would be: <img src="..." loading="lazy">

(See "loading" <img>: The Image Embed element - HTML: HyperText Markup Language | MDN)

[marcellothearcane]

You can have a boolean attribute below if you like. Not everyone will want a lazy loading facility.

[jerry.nummi]

@marcellothearcane, not sure I can make that happen with an image inserted in Rich Text.

[marcellothearcane]

You’re right. That wouldn’t be possible - what you could do instead is have a ‘lazily load images’ boolean just below your rich text. I presume you would want to lazy load all the images if at all.

[jerry.nummi]

Is there an example somewhere? I’m using prismic-reactjs RichText.render() to render the images from a rich text field.

[Phil (Phil Snow)]

Hi Jerry,

I’ll be happy to help.

You can do lazyloading with our Imgix integration and the lazysizes plugin.

This article explains how to do so.

imgix Blog – 2 May 16

imgix blog | Using imgix with lazysizes

But essentially to set this up you just need to

1. Install the plugin
2. Use srcsets for your images
3. Add the lazyload class

There’s also the react-imgix plugin.

Let me know if this helps.

Thanks.

[jerry.nummi]

I think part of the puzzle is not having control over what prismic-dom produces from a richtext field.

prismicio/prismic-dom/blob/master/src/richtext.js#L48

[Levi (Levi Gable)]

You can always use an HTML Serializer to control the output from a Rich Text field:
https://prismic.io/docs/javascript/beyond-the-api/html-serializer

[jerry.nummi]

Thanks for pointing me in the right direction. I’m using Next.js so my serializer needs to return React elements, correct? Is there an example somewhere?

[Levi (Levi Gable)]

Yeah, here is an example HTML Serializer for the prismic-reactjs library:
https://prismic.io/docs/reactjs/beyond-the-api/html-serializer