HubSpot How To: Lazy Load Images in Rich Text Modules

2021 Update: since writing this article there is a new HTML attribute loading="lazy" that you can add to your <img> tag which replaces the old JavaScript method below. HubSpot is also adding lazy loading options across their entire platform so that you don’t have to manually edit the markup. 🎉

Lazy loading images on HubSpot can be tricky when it comes to images that are added in Rich Text Modules. Since there isn’t a way for a developer to control the markup those images output onto the page, it requires a bit of HTML tweaking inside the rich text editor itself.

Personally, I recommend avoiding adding images to rich text modules all-together and, instead, use a well designed template/custom module combo that can accommodate your site’s design and have lazy loading built-in. However, if you don’t have the time or budget to hire a developer, here’s the quick n’ dirty way to lazy load images inside of rich text modules:

Step 1: Add JavaScript

Add the following to the “Footer HTML” in your page’s advanced settings:

<script src="[email protected]/dist/lazyload.min.js"></script>
  var myLazyLoad = new LazyLoad({
  elements_selector: "img[data-src]"

The first script of this snippet adds a lazy loading image plugin to your page and the second script initializes it.

Step 2: Modify Your <img> tags

Inside each of your rich text areas with images in them, click on the “Source Code” button—the icon that looks like this: </>—and find each image tag’s src attribute and change it to data-src. For example, an image that looks like this: <img src=‘example.jpg'> needs to change to this: <img data-src='example.jpg’>

Like I said before, I don’t recommend doing things this way as it’s a bit tedious and can easily be broken. But, if you don’t have the time or resources to develop a template or a custom module that supports lazy loading and just need a quick page speed boost to your existing pages with minimum effort, this will do it for ya you crazy devil, you.


Chad P's avatar'
Chad P says

You can do a replace filter on the content so all `src=”` get replaced with a ‘data-src=”`

Stefen Phelps's avatar'
Stefen Phelps says

That’s a great idea. Although, it does require that their page is using a coded template.

Chad P's avatar'
Chad P says

Not in a blog it doesn’t. Those are always coded.

minijohn's avatar'
minijohn says

That’s genius Chad, I haven’t thought about that! Do you have a code snippet you could share?

Stefen Phelps's avatar'
Stefen Phelps says

You could use something like {{ content.body|replace('src','data-src') }} but I haven’t had luck with adding such filters to rich text areas in the past.

Chad P's avatar'
Chad P says

`{{ content.body|replace(‘<img src=','<img loading="lazy" src=') }}`

Ken Mafli's avatar'
Ken Mafli says

This was really helpful! I have a page where I use a few GIFs and it was killing my pagespeed. This trick raised the pages score over 20 points in Googles page speed test. Thanks!

Add a comment