Responsive lazyloading images

    <picture>
        <source srcset="/assets/images/mobile-image.jpg 430w" data-srcset="/assets/images/mobile-image.jpg 430w" media="(max-width: 700px)" />
        <source srcset="/assets/images/tablet-image.jpg 430w" data-srcset="/assets/images/tablet-image.jpg 430w" media="(max-width: 999px)" />
        <source srcset="/assets/images/main-image.jpg 1920w" data-srcset="/assets/images/main-image.jpg 1920w" />
    <img
            src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
            data-src="/assets/images/main-image.jpg"
            class="lazyload"
            alt="" />
    </picture>

Lazyloading with No mobile options

    <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=" data-src="/assets/images/image-here.webp" alt="" />

Inputting mobile and/or webp backup option, with no lazloading

    <picture>
        <source media="(min-width: 850px)" srcset="/assets/images/image-mobile.webp">
        <source media="(max-width: 850px)" srcset="/assets/images/image-mobile.jpg">
        <img src="/assets/images/image.jpg" alt="">
    </picture>