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.

Marko Tiosavljevic

Marko is an IT and eCommerce expert for over 10 years, he is CEO of the Cloud Industry and an occasional writer on the blog. He writes about technology, e-commerce, analytics, big data, cryptocurrency

Leave a Comment

Your email address will not be published. Required fields are marked *

On Key

Related Posts

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