blur-images

Modern approach to Low Quality Image Placeholders (LQIP) using webp and sharp.

Demo

• Demo

Installation

npm i blur-images

Usage

import { blurImage } from 'blur-images';
const result = await blurImage('fixtures/brooklyn.jpg');

which outputs

{
  content: <Buffer>,
  metadata: {
    originalWidth: 1400,
    originalHeight: 350,
    width: 16,
    height: 4,
    type: 'webp',
    dataURIBase64: 'data:image/webp;base64,UklGRkIAAABXRUJQVlA4IDYAAADQAQCdASoQAAQABUB8JYgCdADjazMu8AD+flCYsVr2GH6CLYVog1jhRLpBUIu8UmqhGnoAAAA='
  }
}

How It Works

This package uses a very similar LQIP approach to the one used by Medium.

We use sharp to resize input images to a max dimension of 16px and output webp (default) or jpeg images with an encoding quality set to 20. The max dimension is a single, simple variable to tradeoff between encoded image size and visual fidelity.

This resuls in very efficient placeholder images that have noticeable artifacts due to the low quality encoding. These artifacts are then hidden in the browser using a simple blur filter.

.placeholder {
  filter: blur(20px);
  transform: scale(1.1);
}

Note that Medium uses this scale transform on its placeholder images for two reasons:

• Hide the artifacts around the edges of the blurred images.
• Provide an aesthetically pleasing feeling of zooming into the original image once it's loaded.

An alternative to using this blur + transform technique is to use a CSS backdrop-filter. This technique has less cross-browser support, but it produces clean blurred preview images without the need to transform the placeholder.

.placeholder::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  backdrop-filter: blur(20px);
  pointer-events: none;
}

Related

• lqip - Original Low Quality Image Placeholders (LQIP) module.
• sqip - Really solid SVG-based LQIP alternative.
  • See their comprehensive comparison of LQIP techniques.
  • The biggest disadvantage of this approach is that it's ~10-100x slower to compute these images.
• blurhash - Really nice, compact placeholder images.
  • Requires non-native client-side decoding which makes it awkward and slow for browser usage.
  • Encoding speed is pretty slow (on par with sqip).
  • Under the hood, the webp format performs a similar set of transforms as the one used by blurhash.