How to lazy load images within a rich text collection item?

Design help CMS
1

Hey folks,

I have a Blog Article collection set up where the main content of the post lives in a Rich Text element.

As far as I can see, there’s no way to lazy load images inserted within a Rich Text element.

Am I correct?

2

Webflow automatically adds the attribute and value of loading="lazy" to the image tag for images inside CMS bound RTF’s. Modern browsers include native lazy loading so this accomplishes what you want. There are no other controls on these images, unlike media in assets.

It’s always possible to write custom code to further manipulate the DOM and behaviors if you desire.

3

Did they remove this feature, just encountered where the images tags within rich text boxes are acculy missing the lazy loading attribute…

1 Like
4

This results in internal anchors being broken as the browser doesn’t know what the height of the document is. Is there a reason Webflow doesn’t allow us to configure these things?

5

I had the same issue where the document’s height was incorrect due to the lazy loading of the RTF’s image, and I couldn’t always scroll until the end of the page. I fixed it by implementing these steps (a workaround):

  1. Add Custom Code to Your Page -
  • Go to your project’s Page Settings or Site Settings (if you want this to apply site-wide)
  • Scroll down to the Before </body> Tag custom code section
  1. Insert the Following Script -
<script>
  document.addEventListener("DOMContentLoaded", function() {
    const richTextImages = document.querySelectorAll('.w-richtext img');
    richTextImages.forEach(function(img) {
      img.removeAttribute('loading');
    });
  });
</script>
  1. Save and Publish
1 Like
6

Nice solution Almog,

Keep an eye on your image compression and bandwidth utilization if you are eager loading a lot of images in your blog content.

1 Like
7

Yes, this is an important note. Thanks!