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.
