Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hunghg255/blur-images
Modern approach to Low Quality Image Placeholders (LQIP) using webp and sharp.
https://github.com/hunghg255/blur-images
blur blur-backgrounds blur-image blur-image-converter blurhash image-processing imagemagick package sharp
Last synced: 7 days ago
JSON representation
Modern approach to Low Quality Image Placeholders (LQIP) using webp and sharp.
- Host: GitHub
- URL: https://github.com/hunghg255/blur-images
- Owner: hunghg255
- License: mit
- Created: 2024-05-20T00:22:57.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-05-20T00:29:03.000Z (9 months ago)
- Last Synced: 2024-11-22T18:15:57.969Z (2 months ago)
- Topics: blur, blur-backgrounds, blur-image, blur-image-converter, blurhash, image-processing, imagemagick, package, sharp
- Language: TypeScript
- Homepage: https://blur-images.vercel.app
- Size: 3.46 MB
- Stars: 8
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/funding.yml
- License: LICENSE
Awesome Lists containing this project
README
Modern approach to Low Quality Image Placeholders (LQIP) using webp and sharp.
## Demo
- [Demo](https://blur-images.vercel.app/)
## Installation
```bash
npm i blur-images
```
## Usage
```js
import { blurImage } from 'blur-images';
const result = await blurImage('fixtures/brooklyn.jpg');
```
which outputs
```js
{
content: ,
metadata: {
originalWidth: 1400,
originalHeight: 350,
width: 16,
height: 4,
type: 'webp',
dataURIBase64: 'data:image/webp;base64,UklGRkIAAABXRUJQVlA4IDYAAADQAQCdASoQAAQABUB8JYgCdADjazMu8AD+flCYsVr2GH6CLYVog1jhRLpBUIu8UmqhGnoAAAA='
}
}
```
## How It Works
This package uses a very similar LQIP approach to the one used by [Medium](https://medium.com/).
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.
```css
.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](http://volkerotto.net/2014/07/03/css-background-image-blur-without-blury-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](https://css-tricks.com/almanac/properties/b/backdrop-filter/). This technique has less [cross-browser support](https://caniuse.com/#search=backdrop-filter), but it produces clean blurred preview images without the need to transform the placeholder.
```css
.placeholder::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
backdrop-filter: blur(20px);
pointer-events: none;
}
```
## Related
- [lqip](https://github.com/zouhir/lqip) - Original Low Quality Image Placeholders (LQIP) module.
- [sqip](https://github.com/axe312ger/sqip) - Really solid SVG-based LQIP alternative.
- See their comprehensive [comparison](https://axe312ger.github.io/sqip/) of LQIP techniques.
- The biggest disadvantage of this approach is that it's ~10-100x slower to compute these images.
- [blurhash](https://github.com/woltapp/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.