How to improve the way images load on a website | HTML, CSS & JavaScript

Why browser-level lazy loading? According to the HTTP Archive, images are the most requested asset type for most websites and usually take up more bandwidth than any other resource. At the 90th percentile, sites send over 5 MB of images on desktop and mobile. That's a lot of cat pictures. The loading attribute # Chrome loads images at different priorities depending on where they're located with respect to the device viewport. Images below the viewport are loaded with a lower priority, but they're still fetched as the page loads. lazy: Defer loading of the resource until it reaches a calculated distance from the viewport. eager: Default loading behavior of the browser, which is the same as not including the attribute and means the image is loaded regardless of where it's located on the page. While this is the default, it can be useful to explicitly set this if your tooling automatically adds loading="lazy" if there is no explicit value, or if your linter complains if it is not explicitly set. All Web Apps: https://myskypower.net/web-apps/ Demo: https://myskypower.net/web-apps/Lazy-Loading-Image/ Source Code: https://myskypower.net/web-apps/Lazy-Loading-Image/Lazy-Loading-Image.zip