How to implement lazy loading in images to web pages?

Regular Contributor

Hello There,

Would like to ask for assistance, does anyone knows how to implement lazy loading in images (referring to hubl images tags) to web pages?

I have found this link in the community but seems that the questions was not answered thou there was a section that was marked as solution, https://community.hubspot.com/t5/CMS-Development/how-to-implement-lazy-loading-in-hubspot-pages-not-....

This article, https://www.bluleadz.com/blog/lazy-loading-images-on-hubspot helps but looks like its good to use if you are working with <img> tags and not for hubl image tag.

If someone knows how to implement lazy loading with hubl image tags please let me know.

Thank you,
Julie Costales

5 Replies 5
Community Manager

Hi @costalesja11,

 

I wanted to share a few resources with you to get you started: 

1. Lazy loading images-the complete guide

2. Lazy loading images

 

Let me know if this doesn't fully answer your question, and I can tag in some subject matter experts!

 

Thanks,
Jenny


We are excited to announce that the Community will be launching a weekly newsletter on November 2, 2020!
Sign up today!
Regular Contributor

Hi @jennysowyrda ,

Thank you for your help. It seems that there is no hubl way to add lazy load to its images and I think the only option is use a js library. And I've decided to use lozad.js.

Best Regards,
Julie Costales

Reply
0 Upvotes
Regular Contributor

if you use AMP dont use these lazy load images like lozad  on blog post images. Or the Hubspot AMP parser will remove all your images on AMP pages.

 

This happens due when converting <img> tags to <amp-img> Hubspot will strip completely all tags that dont have a valid src property. Also it will strip and data-src property. So no images will be displayed on AMP pages.

Reply
0 Upvotes
Regular Contributor | Gold Partner

Here is a nice jQuery plugin for lazy loading. 

http://jquery.eisbehr.de/lazy/

HubSpot Employee

For those who find this thread in the future. Image fields in custom modules support lazy loading now

We recommend implementing browser level lazy loading and our default snippet for the image field uses it.

Jon McLaren

Sr. CMS Developer Advocate

If my reply answered your question, please mark it as a solution, to make it easier for others to find.