LQIP: Low Quality Images Placeholder

Installation

npm install @mole-inc/lqip

Usage Example

Generating Base64 from an image:

import lqip from "@mole-inc/lqip"

const file = `./dest/to/file/riding-a-bike.jpg`;

const res = await lqip(file).catch(err => {
  console.error(err);
});
console.log(res);
// {
//   content: Buffer...,
//   metadata: {
//     originalWidth: 1400,
//     originalHeight: 700,
//     width: 14,
//     height: 7,
//     type: "jpeg",
//     dataURIBase64: "data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhY.....",
//   }
// }
//
// e.g. `<img src="${res.metadata.dataURIBase64}" lazy-src="${file}" >`

// or use `then`

lqip(file).then(res => {
  console.log(res);
}).catch(err => {
  console.error(err);
});

API Documentation

lqip(source: string | Buffer, options?: LqipOpitons): Promise<LqipResult>

default function

Name | Description --------- | --------------------------------------- source | Path to image file or Buffer options | LqipOpitons (optional)

LqipOpitons

export interface LqipOpitons {
  width?: number;
  forceJimp?: boolean;
}

Field | Default | Description ----------- | ------------- | ------------------------------------------------------------------------------- width | 14 | resize width forceJimp | false | When this is a falsy, use sharp to resize if installed.

LqipResult

export interface LqipResult {
  content: Buffer;
  metadata: {
    originalWidth: number;
    originalHeight: number;
    width: number;
    height: number;
    type: string;
    dataURIBase64: string;
  };
}

Inspired by

• Medium web app
• Instagram native mobile app
• Polymer shop project

Remarkable Mentions

• Essential Image Optimization, An eBook by Addy Osmani link

Notes, Credits & License

This is a maintained fork of zouhir/lqip.
Original lqip is released under The MIT License by Zouhir Chahoud.

Please see LICENSE file