JSFiddle - React, Tailwind, and code Playground

HTML

<section>
        <div class="img">
            <div class="desktop-bg"></div>
            <p>Background image. Anything < 1000px wide won't download the image</p>
        </div>

        <div class="img">
            <img
                src="https://placehold.co/400x400?text=SrcSet.jpg"
                srcset="https://placehold.co/600x400?text=SrcSet600.jpg 600w,
                        https://placehold.co/800x400?text=SrcSet800.jpg 800w,
                        https://placehold.co/1200x400?text=SrcSet1200.jpg 1200w"
            >
            <p>Image with srcset: default, 400, 600, 800, 1200</p>
        </div>

        <div class="img">
            <img
                    class="hide"
                    src="https://placehold.co/400x400?text=SrcSetDisplayNone.jpg"
                    srcset="https://placehold.co/600x400?text=SrcSetDisplayNone600.jpg 600w,
                        https://placehold.co/800x400?text=SrcSetDisplayNone800.jpg 800w,
                        https://placehold.co/1200x400?text=SrcSetDisplayNone1200.jpg 1200w"
            >
            <p>Image with srcset display none: default, 400, 600, 800, 1200</p>
        </div>

        <div class="img">
            <img
                    class="hide"
                    loading="lazy"
                    src="https://placehold.co/400x400?text=SrcSetDisplayNoneLazy.jpg"
                    srcset="https://placehold.co/600x400?text=SrcSetDisplayNoneLazy600.jpg 600w,
                        https://placehold.co/800x400?text=SrcSetDisplayNoneLazy800.jpg 800w,
                        https://placehold.co/1200x400?text=SrcSetDisplayNoneLazy1200.jpg 1200w"
            >
            <p>Image with srcset display none + lazy loading</p>
        </div>
    </section>

CSS

.desktop-bg {
            background:#f1f1f1;
            width:100%;
            min-height:400px;
        }

        .img {
            border:1px solid #ddd;
            margin:2em;
            padding:2em;
            max-width:1200px;
            img {
                width: 100%;
            }
        }
        .hide {
            display: none;
        }

        @media screen and (min-width: 1000px) {
            .desktop-bg {
                background-image: url("https://placehold.co/400x400?text=LoadBgImage.jpg");
                background-size: cover;
                background-position: center;
            }
        }