Native image lazyloading support

Native image lazyloading support

Browsers are always trying to optimize as well. Some browsers already support lazyloading of images and iframes, using the loading attribute.

Back in the days, we lazyloaded images by not setting its src-attribute, but by introducing a fake attribute holding the path to our desired image. Using JS, we can detect if the image is near the user's viewport, and load them.

When IntersectionObserver came around, things got easier. No need to check for browser resizing and less JavaScript had to be executed on the main thread. Already great performance wins.

Native image lazyloading support by browsers

A better solution would be, if developers didn't need to use JavaScript at all and could rely on browsers, doing the work for them. This would reduce development-time as well. Native lazyloading was as desired, as a dark-mode amongst Stackoverflow users.

Intent to Ship: Lazily load below-the-fold images and iframes

Eventually, it happened within Chromium and native lazyloading is supported as off:

  • Chrome 76
    since July 30, 2019;
  • Edge 79 (also on Chromium nowadays),
    since January 15, 2020;
  • FireFox 75
    since April 8, 2020;
  • Opera 64
    since October 7, 2019;
  • Android Browser 80
    since Februari 18, 2020
  • Safari 14
    since: to be announced

Visit caniuse.com for current browser support. While already around for a while, FireFox is late to the party and Safari is still missing. Another reason why Safari is called the new Internet Explorer.

Fallback when JavaScript has been disabled

Even when JavaScript is disabled or when printing pages, images would still load thanks to the new loading attribute as opposed to using a JavaScript library.

When using a JavaScript library, try to have a noscript fallback per image to meet those who have JavaScript disabled. Obviously, this is something that a library can't and won't do for you and has to be configured server side (for example, using a plugin that will change image attributes and creates noscript fallbacks at the same time).