Google Chrome updates lazy-loading feature to reduce image quality threshold and save data

Google has improved the lazy-loading for images in Chrome. Aside from reducing the image quality threshold, Google has also managed to save data loss. Native lazy-loading configuration for images is used by Google Chrome to load images only when a user has scrolled enough to reach them. Using the loading attribute, users of Chrome 76+ can defer off-screen images from getting loaded. And, this saves data. [caption id=“attachment_8652841” align=“alignnone” width=“1280”] Osmani wrote that the changes have been backported till Chrome 79, so the users of older versions can also access the feature.[/caption] Addy Osmani, Google Engineering Manager working on Chrome, explained the new settings in his blog. He wrote that the distance-from-viewpoint threshold for images will be brought down from 3,000 pixels to 1,250 pixels on fast connections and from 4,000 pixels to 2,500 pixels on slower ones. [caption id=“attachment_8652801” align=“alignnone” width=“1280”] Image: Google[/caption] Reducing the threshold will help developers achieve two things – the coding will give a similar experience to other lazy-loading libraries present and it will still guarantee that images have been loaded by the time a user has reached them. Demo images on the site show that the changed settings mean the images off-screen get loaded a little later and the overall results are quite similar to those offered by Lazysizes, which is a popular JavaScript online library. The demo by Osmani shows that the data required to complete the loading gets nearly halved upon using the new thresholds. Osmani wrote that the changes have been backported till Chrome 79, so the users of older versions can also access the feature. A report by Android Police said that the iframe embeds used by YouTube videos or Spotify widgets will also be able to benefit from lazy loading. When these apps are not in use, data can be saved.