New to Chrome 77 and also Edge (Chromium) is the native functionality to lazy load images, that is to only request images when the user scrolls the page to a certain position. Although this position is calculated in the browser (I don't know the formula), images are loaded up when it scrolls near to the image position.

It can be achieved by using the loading attribute with a value of lazy in an image element and can also be part of a Picture element as well.

An example with a standard image element:-

An example with a picture element:-

It currently works in Edge (Chromium) Version 81.0.381.0 and Chrome 77 but not Firefox as of version 72.0.1 that I tested with.

By omitting the loading attribute, the browser wil default to auto which means it will determine if the image should be lazy loading. To override this use the eager value which will load the image on page load.

What about a fall back?

For unsupported browsers such as Firefox, Edge Version 44 and of course IE, it is possible to replicate the functionality using a poly fill like this:-

Happy coding

Comments

HTTP Endpoint Monitoring for both Windows and Android
WebUp App