Progressive Images
ready

Introduction

Progressive image loading allows you to load a low res version of an image, and then asynchronously load the full-sized image. The benefit is a smaller initial page load size, and therefore, a faster initial load.

Examples

Using an inline image

<div class="progressive aspect-ratio--16/9">
      <img class="progressive__img"
        data-js="blur-up"
        data-pf-original-src="/v2.0/assets/images/content/splash-student-life-2.jpg"
        src="/v2.0/assets/images/content/low-res/splash-student-life-2.jpg" >
    </div>

Using a background image

<div class="progressive-background aspect-ratio--16/9"
      style="background-image: url('/v2.0/assets/images/content/low-res/splash-student-life-2.jpg');"
      data-js="blur-up"
      data-pf-original-src="/v2.0/assets/images/content/splash-student-life-2.jpg">
    </div>

Dependencies

  • src/styles/base/*.scss
  • src/styles/components/blocks/_progressive-image.scss
  • src/scripts/modules/pfProgressiveImageLoading.js

Usage

Class/JavaScript Hook Description Required?
.aspect-ratio--16/9 A helper class to create 16:9 intrinsically sized box. Optional
.aspect-ratio--julia This is a non-standard aspect ratio that we use on banners and videos. Optional
.progressive Placed on outer-most tag that will contain the progressive image to be loaded. Required. When using the img tag approach
.progressive__img Placed on img tag. Required. When using the img tag approach
.progressive-background Placed on the tag that will contain the low-res background image. It ensures the background image fills its space correctly. Required. When using the background image approach
[data-js='blur-up'] Placed on tag that contains the low-res src Required
[data-pf-original-src='path/to/full-size.jpg'] Placed on tag that contains the low-res src Required. This is the image that will replace the low-res one.