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
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