We've improved image lazy-loading in Chrome!

We’ve improved <img> lazy-loading in Chrome! The new thresholds for when we load <img loading=lazy> offer much better data-savings, are closer to JavaScript lazy-loading libraries, are rolling out to Chrome 79+.

Improved data-savings and distance-from-viewport thresholds

As of July 2020, Chrome has made significant improvements to align the native image lazy-loading distance-from-viewport thresholds to better meet developer expectations.

On fast connections (e.g 4G), we reduced Chrome’s distance-from-viewport thresholds from 3000px to 1250px and on slower connections (e.g 3G), changed the threshold from 4000px to 2500px. This change achieves two things:

• <img loading=lazy> behaves closer to the experience offered by JavaScript lazy-loading libraries like lazysizes
• The new distance-from-viewport thresholds still allow us to guarantee images have probably loaded by the time a user has scrolled to them.

You can find a comparison between the old vs. new distance-from-viewport thresholds for one of our demos on a fast connection (4G) below:

Old thresholds. vs new thresholds:

and the new thresholds vs. LazySizes (a popular JS lazy-loading library):

Note: To ensure Chrome users on recent versions also benefit from the new thresholds, we have backported these changes so that Chrome 79 - 85 inclusive also uses them. Please keep this in mind if attempting to compare data-savings from older versions of Chrome to newer ones.

We are committed to working with the web standards community to explore better alignment in how distance-from-viewport thresholds are approached across different browsers.

To learn more, check out our blog post about native image lazy-loading on web.dev.