Lazy Blur Images

Lazy Blur Images is a single-light script that allows developers to implement an async image charge in their websites when they are in the visible area of the user

You can view a example of this library from here

How Works

Lazy Blur Images works with base64 images to show a light preview while the real image is downloaded in the background, the image will be downloaded after the "load" event if it is in the visible area, by default the Intersection Observer API is used to detect if the image is in the visible area, if the browser does not support this api, it is downloaded inmediatally after the "load" event

Placeholder Studio

You can get and manipulate a placeholder from the official (and free) Placeholder Studio for this package

How to implement

We need to get our base64 small image from Placeholder Studio

<img
  src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
  data-src="assets/img/demopic/9.jpg"
  data-placeholder="blur"
  data-blur="some-blur-id"
  data-scale="1.5"
  data-radio="20"
  data-size="WxH"
  decoding="async"
  alt="Some alt text"
/>
<noscript><img src="assets/img/demopic/9.jpg" /></noscript>
<!-- Before close body -->
<script src="https://cdn.jsdelivr.net/npm/lazy-blur-images@latest/lazy-blur-images.js"></script>
<script>
  lazyBlurData = {
    "some-blur-id": "Your-blur-image-string-in-base64",
  };
  LazyBlurImages.init();
</script>

| property | description | default | | ---------------- | ---------------------------------------------------------- | -------- | | src | gif 1x1 pixel transparent in base64 | Manually | | data-src | The original image url | Manually | | data-placeholder | Placeholder type (only blur supported) | Manually | | data-size | Image size in WxH format ( e.g. 200x500 ) | Manually | | data-blur | The blur key of the lazyBlurData object | Manually | | data-scale | Custom css transform: scale() used to show the placeholder | 1 | | data-radio | Custom css filter: blur() radio in pixels | 20 |

The <noscript>...</noscript> tags contain the original image, it will be showed if javascript is disabled