{
  "progressive-image": {
    "title": "Progressive Images",
    "status": {
      "ready": true
    },
    "introduction": "<p>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.</p>",
    "examples": [
      {
        "description": "Using an inline image",
        "template": "progressive-image"
      },
      {
        "description": "Using a background image",
        "template": "progressive-background-image"
      }
    ],
    "dependencies": [
      "src/styles/base/*.scss",
      "src/styles/components/blocks/_progressive-image.scss",
      "src/scripts/modules/pfProgressiveImageLoading.js"
    ],
    "usages": {
      "body": [
        [
          "<code>.aspect-ratio--16/9</code>",
          "A helper class to create 16:9 intrinsically sized box.",
          "Optional"
        ],
        [
          "<code>.aspect-ratio--julia</code>",
          "This is a non-standard aspect ratio that we use on banners and videos.",
          "Optional"
        ],
        [
          "<code>.progressive</code>",
          "Placed on outer-most tag that will contain the progressive image to be loaded.",
          "Required. When using the <code>img</code> tag approach"
        ],
        [
          "<code>.progressive__img</code>",
          "Placed on <code>img</code> tag.",
          "Required. When using the <code>img</code> tag approach"
        ],
        [
          "<code>.progressive-background</code>",
          "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"
        ],
        [
          "<code>[data-js='blur-up']</code>",
          "Placed on tag that contains the low-res src",
          "Required"
        ],
        [
          "<code>[data-pf-original-src='path/to/full-size.jpg']</code>",
          "Placed on tag that contains the low-res src",
          "Required. This is the image that will replace the low-res one."
        ]
      ]
    }
  }
}