sqipify

CLI

Github

NPM

npm i -g sqipify-cli
sqipify --help

Demo

Generate SVG Placeholders for Images using SQIP based on Primitive.

Reference Image

700x882, 24 bit, 58.3 KB

Parameters

| blur | numberOfPrimitives = 10 | numberOfPrimitives = 50 | numberOfPrimitives = 100 | numberOfPrimitives = 500 | |--------|:---------------------------------------------:|:----------------------------------------------:|:-----------------------------------------------:|:------------------------------------------------:| | 0 | 859 B | 3.50 KB | 6.59 KB | 37.52 KB | | 5 | 913 B | 3.90 KB | 6.48 KB | 37.93 KB | | 10 | 1019 B | 3.58 KB | 6.61 KB | 38.13 KB | | 25 | 995 B | 3.48 KB | 6.42 KB | 37.88 KB | | 100 | 1010 B | 3.72 KB | 6.73 KB | 38.01 KB |

Only Triangles

| blur | numberOfPrimitives = 10 | numberOfPrimitives = 50 | numberOfPrimitives = 100 | numberOfPrimitives = 500 | |--------|:-------------------------------------------:|:---------------------------------------------:|:----------------------------------------------:|:-----------------------------------------------:| | 0 | 714 B | 3.04 KB | 5.83 KB | 28.32 KB | | 5 | 797 B | 3.09 KB | 5.98 KB | 28.17 KB | | 10 | 783 B | 3.07 KB | 5.92 KB | 28.21 KB |

Only Rectangles

| blur | numberOfPrimitives = 10 | numberOfPrimitives = 50 | numberOfPrimitives = 100 | numberOfPrimitives = 500 | |--------|:-------------------------------------------:|:---------------------------------------------:|:----------------------------------------------:|:-----------------------------------------------:| | 0 | 647 B | 2.72 KB | 5.30 KB | 25.95 KB | | 5 | 719 B | 2.77 KB | 5.38 KB | 26.06 KB | | 10 | 719 B | 2.80 KB | 5.41 KB | 26.02 KB |

Use

import sqipify from "sqipify"

const { input, output } = await sqipify("norway.jpg", numberOfPrimitives, blur, mode)

Setup (in ./)

Install NodeJS

Download

Fetch dependencies

npm install

Dev (in ./)

Typescript builds are automatic and watch for file changes:

npm run build

or run this to build only once:

npm run buildOnce

Building, Linting, Formatting, Testing:

npm test

Contribution

• use git pull --rebase in favor of regular pull, i recommend configuring it globally via:

  git config --global pull.rebase true