---
title: "HubSpot How To: Lazy Load Images in Rich Text Modules"
description: "2021 Update: since writing this article there is a new HTML attribute loading=”lazy” that you can add to your ![]()
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 […]"
image: https://modern.kelp.agency/hubfs/woman-using-laptop-computer-with-vr-headset.jpg
---
[Skip to Content](https://modern.kelp.agency/blog/hubspot-how-to-lazy-load-images-in-rich-text-modules#main-content)
Kelp Creative Agency logo dark
[](https://modern.kelp.agency/)
Kelp Creative Agency logo light
[](https://modern.kelp.agency/)
- Page Layouts
- [Home](https://modern.kelp.agency)
- [Services](https://modern.kelp.agency/template-services)
- [Contact](https://modern.kelp.agency/contact)
- [Landing](https://modern.kelp.agency/template-landing)
- System
- [404 Error](https://modern.kelp.agency/404)
- [Documentation](https://modern.kelp.agency/docs)
- [Theme Options](https://modern.kelp.agency/docs#theme-options)
- [Templates](https://modern.kelp.agency/docs#templates)
- [Modules](https://modern.kelp.agency/docs#modules)
- [Blog](https://modern.kelp.agency/blog)
Search
[Purchase Theme](https://ecosystem.hubspot.com/marketplace/website/modern-pro-theme-by-kelp-creative-agency)
Menu
## Search
HubSpot How-Tos
# HubSpot How To: Lazy Load Images in Rich Text Modules
written by **Stefen Phelps**
---
**2021 Update:** since writing this article there is a new HTML attribute `loading="lazy"` that you can add to your `![]()
` 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:
```
```
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 ![]()
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: `
` needs to change to this: `