npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

lqip-modern

v2.0.0

Published

Modern approach to Low Quality Image Placeholders (LQIP) using webp and sharp.

Downloads

11,392

Readme

lqip-modern

Modern approach to Low Quality Image Placeholders (LQIP) using webp and sharp. (demo)

NPM Build Status Prettier Code Formatting

This approach is extremely fast and produces much smaller outputs than alternatives.

Examples

Check out the demo for more examples and details.

How It Works

This package uses a very similar LQIP approach to the one used by Medium.

We use sharp to resize input images to a max dimension of 16px and output webp (default) or jpeg images with an encoding quality set to 20. The max dimension is a single, simple variable to tradeoff between encoded image size and visual fidelity.

This resuls in very efficient placeholder images that have noticeable artifacts due to the low quality encoding. These artifacts are then hidden in the browser using a simple blur filter.

.placeholder {
  filter: blur(20px);
  transform: scale(1.1);
}

Note that Medium uses this scale transform on its placeholder images for two reasons:

  • Hide the artifacts around the edges of the blurred images.
  • Provide an aesthetically pleasing feeling of zooming into the original image once it's loaded.

An alternative to using this blur + transform technique is to use a CSS backdrop-filter. This technique has less cross-browser support, but it produces clean blurred preview images without the need to transform the placeholder.

.placeholder::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  backdrop-filter: blur(20px);
  pointer-events: none;
}

Install

npm install --save lqip-modern
## or
yarn add lqip-modern
## or
pnpm add lqip-modern

Usage

const lqip = require('lqip-modern')
const result = await lqip('fixtures/brooklyn.jpg')

which outputs

{
  content: <Buffer>,
  metadata: {
    originalWidth: 1400,
    originalHeight: 350,
    width: 16,
    height: 4,
    type: 'webp',
    dataURIBase64: 'data:image/webp;base64,UklGRkIAAABXRUJQVlA4IDYAAADQAQCdASoQAAQABUB8JYgCdADjazMu8AD+flCYsVr2GH6CLYVog1jhRLpBUIu8UmqhGnoAAAA='
  }
}

If you pass an array of inputs, the result will be an array of outputs.

The format of the output is as close to sqip as possible for easy comparison.

API

lqipModern

  • input (Buffer | string | Array<Buffer> | Array<string>) Either an array of image inputs or a single image input. Each image input may either be a Buffer containing raw image data, or a string containing the filesystem path to a supported image type.
  • opts Object? Optional configuration options.
    • opts.concurrency number Concurrency when processing an array of input images. (optional, default 4)
    • opts.outputFormat string Output format to use; either webp or jpeg (passing jpg is the same as passing jpeg). (optional, default 'webp')
    • opts.outputOptions Object? Output options passed to either sharp.webp or sharp.jpeg dependent on opts.outputFormat.
    • opts.resize (number | Array<any>)? Options to pass to sharp.resize. Defaults to resizing inputs to a max dimension of 16, with the other dimension being calculated to maintain aspect ratio. If you want more control, you can pass an array of args here which will be forwarded to sharp.resize.

Compatibility

Webp is supported by 98% of browsers and produces significantly smaller results.

If you need 100% browser support, then I recommend that you use the jpeg output format or sqip.

In the future, I'd love to experiment with outputting jpeg at full quality and then compressing the results with mozjpeg at 20% quality.

Comparison

| Approach | format | Width | Avg Encode Speed | Avg Size | | --------------- | ------ | -------- | ---------------- | -------- | | lqip-modern 🔥 | webp | 16px | 0.011s | 152 B | | lqip-modern | jpeg | 16px | 0.003s | 274 B | | lqip-modern | webp | 8px | 0.014s | 129 B | | lqip-modern | jpeg | 8px | 0.003s | 244 B | | lqip-modern | webp | 32px | 0.013s | 257 B | | lqip-modern | jpeg | 32px | 0.002s | 347 B | | lqip (original) | jpeg | 10px | 0.395s | 887 B | | lqip-custom | jpeg | 32px | 0.040s | 545 B | | sqip (default) | svg | original | 1.468s | 509 B |

Check out the demo for full results.

Generated with a fork of sqip's excellent comparison benchmark.

Related

  • lqip - Original Low Quality Image Placeholders (LQIP) module.
  • sqip - Really solid SVG-based LQIP alternative.
    • See their comprehensive comparison of LQIP techniques.
    • The biggest disadvantage of this approach is that it's ~10-100x slower to compute these images.
  • blurhash - Really nice, compact placeholder images.
    • Requires non-native client-side decoding which makes it awkward and slow for browser usage.
    • Encoding speed is pretty slow (on par with sqip).
    • Under the hood, the webp format performs a similar set of transforms as the one used by blurhash.

License

MIT © Travis Fischer

Support my OSS work by following me on twitter