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.

Facebook
Twitter
LinkedIn
Pinterest
Reddit
VK
Tumblr

Leave a Comment

Your email address will not be published.

Do you have any question or comment about article?

popular...

Related Posts