Create Performant Low Quality Image Placeholders – lqip-modern

Category: Image , Javascript , Recommended | August 26, 2020
Views Total:533 views
Official Page:Go to website
Last Update:August 26, 2020


Create Performant Low Quality Image Placeholders – lqip-modern


lqip-modern is a modern image processor to generate 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 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

You Might Be Interested In:

Leave a Reply