Lazyloading

Lazyloading a Video

<video preload="none" poster="/assets/images/video-poster.jpg" playsinline controls>
	<source class="lazyload" data-src="/source-here.mp4" src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=" type="video/mp4">
</video>



Responsive lazyloading images

    <picture>
        <source data-srcset="/assets/images/mobile-image.jpg 430w" media="(max-width: 700px)" />
        <source data-srcset="/assets/images/tablet-image.jpg 430w" media="(max-width: 1100px)" />
        <source 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>