JSFiddle - React, Tailwind, and code Playground

HTML

<div class="above-the-fold">
            <p>SCROLL DOWN - this section is "above the fold" content so <strong>should not be lazyloaded</strong> using the following techniques</p>
            <p>Some key features of the techniques used in this example are:</p>
            <ul>
                <li><strong>images are sized pixel perfect</strong> - in terms of byte efficiency this beats all current solutions including the "picture" element. It is also automatic so you don't need to set breakpoints in the HTML etc. All handled server side other than the image size request which is calculated by the browser</li>
                <li><strong>Minimal Markup</strong> - other than additional "noscript" element around the image the markup is just standard HTML.</li>
                <li><strong>automatically requested as WebP if supported</strong> - handled server side through your API based on criteria sent. For this example we use <a href="https://placehold.it">placehold.it</a> as their API handles different image sizes and formats, you would have to build your own solution! I have included an example of how to build the query string that could be sent to your server within the JavaScript (and a separate part for building the placehold.it string purely for demo purposes that can be removed if you use this as a base for your own script).</li>
                <li><strong>CTRL + P is intercepted</strong> - so we can load all images for print and as long as the images are off the page on initial page load there is zero layout shift when they load in. Sadly doesn't work if using FILE -> PRINT</li>
                <li><strong>FILE -> PRINT is handled as gracefully as possible</strong> - if images haven't loaded in yet we display a box at the same size in its place telling the user to scroll down to print and detailing the "alt" attribute information.</li>
                <li><strong>Dynamic loading</strong> - although this needs improving for production we test the latency of the...

CSS

/*purely for demonstration or how we can add additional accessibility checks for missing / empty alt attributes*/
            .no-alt{
                outline: 5px solid red;
            }
            /*as this example will result in massive layout shifts for content that is on screen (which shouldn't be lazy loaded anyway) we add an item to push all the images off screen */
            .above-the-fold{
                width: 100vw;
                min-height: 100vh;
            }
            /* the below are just to demonstrate that applied styles are honoured when calculating the image size to be requested*/
            .container{
                width: 50%;
            }
            /* height: auto is important to avoid Layout shifts and to ensure that the images height attribute is not used instead */
            img{
                width: 100%;
                height: auto;  
            }
            .some-class{
                width: 25%;
            }
            .some-other-class{
                width: 50%;
            }
            /* our print warning needs to be hidden */
            .print, .print p{
                display: none;  
                margin: 0;
                text-align: center;
            }
            /* when printing if any images aren't loaded we want our print warnings to be visible */
            @media print{
                .print, .print p{display: block;} 
                .print{
                    outline: 1px solid #333;
                    break-inside: avoid;
                }
                /* we hide any images that only have placeholders so they don't interrupt the document flow, our print divs are the same size to ensure visual layout is consitent */
                img.lazy{
                    display: none;
                }
            }

JavaScript

// grab all of the "noscripts" on the page. We add a class just to make sure we don't grab other noscript tags by mistake.
            var noScripts = document.querySelectorAll("noscript.lazy");
            // screen width is used as a fallback if an image does not have a width defined.
            const screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            // grab the DPR of the display for if we want to scale images based on the pixel density
            var dpr = window.devicePixelRatio || 1;
            // not used in current version but left in for future proofing as I improve this example.
            var nativeLazy = false;
            //check if we can request webP images.
            var supportsWebP = support_format_webp();
            //used to hold all of the images that are not yet loaded.
            var lazy = [];
//////////////SETTINGS/////////////////////////
//should we account for DPR? In the demo this is off but something that I would consider in production.
            var adjustDPR = false;
            //we use this to determine whether the connection is fast enough to download all images automatically, the current implementation needs improving
            var isConnectedFast = false;


            //quick check to see if webp is supported.
            function support_format_webp() {
                var elem = document.createElement('canvas');
                if (!!(elem.getContext && elem.getContext('2d'))) {
                    return elem.toDataURL('image/webp').indexOf('data:image/webp') == 0;
                } else {
                    return false;
                }
            }
            
            //see if lazy loading is implemented natively, not used at the moment but useful for future proofing this implementation as it evolves.
            if ("loading" in HTMLImageElement.prototype) {
                nativeLazy = true;
            }

            // when we add...