Modern Low-Quality Image Placeholders | LQIP-Modern

LQIP (Low-Quality Image Placeholders) creates effective image placeholder previews with the main goal of improving the perceived load time of image-heavy websites. Suitable for providing a modern and efficient download experience for slow-loading images.

image placeholder html, javascript add image to div, javascript dynamically load images from folder, how to insert image in javascript

How to make use of 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 photos and generate Low-Quality Image Placeholders with lqip-modern.

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

})

Create Performant Low-Quality Image, LQIP Your Images for Fast Loading, Optimized Lazy Image Loading, dynamic stacking of images in javascript


See Demo And Download

Official Website(transitive-bullshit): Click Here

This superior jQuery/javascript plugin is developed by transitive-bullshit. For extra Advanced usage, please go to the official website.

Share