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>