Create Performant Low Quality Image Placeholders – lqip-modern

Preview:

Description:

lqip-modern is a modern image processor to generate Medium.com like Low Quality Image Placeholders (LQIP) using webp and sharp.

Suitable for providing a modern and performant loading experience in lazy loading of images.

How to use it:

1. Install and import the lqip-modern.

# Yarn
$ yarn add lqip-modern
# NPM
$ npm i lqip-modern --save

const lqip = require('lqip-modern')

2. Process your images and generate Low Quality Image Placeholders with lqip-modern. The image parameter can be either an array of images or a single image. Each image input may either be a Buffer containing raw image data, or a string containing the image path.

const result = await lqipModern(image)

3. Available options.

const result = await lqipModern(image,{
    // concurrency when processing an array of images
    concurrency: 4,
    // 'webp' or 'jpeg'
    outputFormat: 'webp',
    // passed to either sharp.webp or sharp.jpeg dependent on opts.outputFormat
    outputOptions {},
    // number or Array
    resize: 16
})