Using Lazy Images & Videos

• Use the .lazy class on a media element (image or video).
• Put the actual media source in the [data-src] attribute.
• Put a placeholder in the [src] attribute (see the examples below).
• When using a background, don't forget to set the width and height on the parent container.

Example 1. Responsive lazy image

<div class="lazy-wrapper">
  <img
    class="lazy"
    src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100%25'%20height='100%25'%3E%3C/svg%3E"
    decoding="async"
    data-src="img/assets/postsPortfolio/project01/01-cover-1-landscape.jpg"
    width="1920"
    height="1280"
    alt=""
  />
</div>

Example 2. Lazy background (cover)

<div
  class="lazy-wrapper"
  style="width: 100%; height: 600px;"
>
  <img
    class="lazy of-cover"
    src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100%25'%20height='100%25'%3E%3C/svg%3E"
    decoding="async"
    data-src="img/assets/postsPortfolio/project01/01-cover-1-landscape.jpg"
    width="1920"
    height="1280"
    alt=""
  />
</div>

Example 3. Lazy background (contain)

<div
  class="lazy-wrapper"
  style="width: 100%; height: 600px;"
>
  <img
    class="lazy of-contain"
    src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100%25'%20height='100%25'%3E%3C/svg%3E"
    decoding="async"
    data-src="img/assets/postsPortfolio/project01/01-cover-1-landscape.jpg"
    width="1920"
    height="1280"
    alt=""
  />
</div>

Example 4. Lazy background with custom "object-position"

<div
  class="lazy-wrapper"
  style="width: 100%; height: 600px;"
>
  <img
    class="lazy of-cover op-top-center"
    src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100%25'%20height='100%25'%3E%3C/svg%3E"
    decoding="async"
    data-src="img/assets/postsPortfolio/project01/01-cover-1-landscape.jpg"
    width="1920"
    height="1280"
    alt=""
  />
</div>

Here are the available helper classes:

.op-top-center /* object-position: top center */
.op-right-center /* object-position: right center */
.op-bottom-center /* object-position: bottom center */
.op-left-center /* object-position: left center */

Example 5. Lazy video background (cover)

<div
  class="lazy-wrapper"
  style="height: 800px;"
>
  <video
    class="lazy of-cover"
    src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100%25'%20height='100%25'%3E%3C/svg%3E"
    data-src="img/assets/postsPortfolio/project06/06-cover-1-landscape.mp4"
    muted
    autoplay
    playsinline
    width="1920"
    height="1280"
  ></video>
</div>

Example 6. Lazy video background (contain)

<div
  class="lazy-wrapper"
  style="height: 800px;"
>
  <video
    class="lazy of-contain"
    src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100%25'%20height='100%25'%3E%3C/svg%3E"
    data-src="img/assets/postsPortfolio/project06/06-cover-1-landscape.mp4"
    muted
    autoplay
    playsinline
    width="1920"
    height="1280"
  ></video>
</div>