Create Performant Low Quality Image Placeholders – lqip-modern

Category: Image , Javascript , Recommended | August 26, 2020
Author: transitive-bullshit
Views Total: 133 views
Official Page: Go to website
Last Update: August 26, 2020
License: MIT


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