CMS Development

costalesja11
Contributor

How to implement lazy loading in images to web pages?

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
jmclaren
HubSpot Employee
HubSpot Employee

How to implement lazy loading in images to web pages?

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

Get started developing on the HubSpot CMS Developer Changelog
How to optimize your CMS Hub site for speed

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

dhirajpandey
Participant | Diamond Partner
Participant | Diamond Partner

How to implement lazy loading in images to web pages?

Here is a nice jQuery plugin for lazy loading. 

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

jennysowyrda
Community Manager
Community Manager

How to implement lazy loading in images to web pages?

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

costalesja11
Contributor

How to implement lazy loading in images to web pages?

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

0 Upvotes
defranco
Contributor

How to implement lazy loading in images to web pages?

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.

0 Upvotes