<img> lazy-loading in Chrome! The new thresholds for when we load
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
1250px and on slower connections (e.g 3G), changed the threshold from
2500px. This change achieves two things:
- 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.