How to lazyload images in HubSpot

How to lazyload images in HubSpot

Lazy loading is getting HTML support in modern browsers. so you can add that attribute to your img tag

loading="lazy"
Unfortunately, this probably doesn’t cover all that you need so I would suggest adding a js backup. I think it is pretty clearly laid out in this post.

So for your image tag, it would look something like this:


now anytime you swap an image, it will update both the data-src and the src

Lazy loading requires you to add a js lib to your pages and modify a little the code of your images while editing it.– View source code and change the src with data-src and add the class lazy to your classes. here is an example


you can learn more here.

https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video

this is the lib I’m using

https://github.com/malchata/yall.js

If this post helped you resolve your issue, please consider marking it as the solution. Thank you for supporting our HubSpot community.

Share the Post:

Related Posts

Join Our Newsletter

Scroll to Top