About

This is a demo page for blurrid, a nodejs image blur module based on the dct algorithm, paired with a custom web component for rendering blurred placeholder images on the client before the original image is loaded.

This can help increase loading speeds of sites with many image assets by reducing the bandwidth required for the initial load. Additionally, a blurred placeholder image looks aesthetically pleasing, whilst preventing content jumping when the original image is loaded. See the gallery below for some examples.

The blur module and custom web component demonstrated on this page are open source. Please visit the github link below to review or contribute to the code, or to find out more about using this package in your own project.

blurrid

Gallery

Below are some example blurred placeholder images created using the blurrid package, and rendered using the included custom web component. All examples have been generated using 16 max samples, "4:2:2" chroma subsampling, with a 64 character long url-safe base 64 encoded "blurrid" string.

Similar to the loading property on standard image elements, the blurrid custom web component offers both lazy and eager loading methods for scheduling when to load the original image. Additionally the blurrid web component provides an onclick loading method which will not load the original image until the blurred placeholder is clicked. All placeholders below use the onclick loading method.