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