This is the v1 alpha readme. You can find the current docs here.
SQIP is a flexible, and a little bit different image processor. It is available as node API and CLI.
By combining plugins you can use it for several purposes:
- Create super-tiny image previews to improve your websites lazy loading experience
- Do art by converting images into abstract representations of themselfes
- Quickly convert, resize or optimize a set of pixel or vector images
- More? Ideas, contributions and community plugins are very welcome
Get a more detailed look on our demo website.
- Node.js >= v8 (https://nodejs.org/en/)
- 64bit OS (Not all plugins, see below)
Non-64bit operating systems requirements
The most common plugin sqip-plugin-primitive is packed with a 64bit executable for all 3 major operating systems. Users with non 32-bit operating system or those who simply want to use the latest and greatest verison of primitive need:
- Golang (https://golang.org/doc/install)
- Primitive (https://github.com/hashbite/primitive) (
go get -u github.com/hashbite/primitive)
After installing Primitive, you may also need to add the path to the Primitive binary file.
It would generally look something like
To do this on a Mac, type: sudo vim /etc/paths into your terminal, and add the path to your Primitive binary file, but be sure to add the full path, /Users/ and not ~/go/bin.
Using the command line (https://www.windows-commandline.com/set-path-command-line)
Using a GUI (https://www.computerhope.com/issues/ch000549.htm)
You need the core plugin sqip plus all the plugins you want to use like sqip-plugin-primtive, sqip-plugin-svgo and more.
For example:
npm install sqip@canary sqip-plugin-primitive@canary sqip-plugin-svgo@canary sqip-plugin-data-uri@canary
This is the v1 alpha readme. Click here for v0 “stable” instructions.
Hint: SQIP is plugin based, you might want to install more plugins later on. See Plugins section.
SQIP is async.
If you passed a single image to process, SQIP will return the following result object:
…’),
metadata: {
originalWidth: 1024,
originalHeight: 640,
palette: {
Vibrant: Vibrant.Swatch,
DarkVibrant: Vibrant.Swatch,
LightVibrant: Vibrant.Swatch,
Muted: Vibrant.Swatch,
DarkMuted: Vibrant.Swatch,
LightMuted: Vibrant.Swatch
},
width: 300,
height: 188,
type: ‘svg’,
// These will be added by sqip-plugin-data-uri
dataURI: “data:image/svg+xml,…”,
dataURIBase64: ‘data:image/svg+xml;base64,…’
}
}” dir=”auto”>
{ content: Buffer.from(''), metadata: { originalWidth: 1024, originalHeight: 640, palette: { Vibrant: Vibrant.Swatch, DarkVibrant: Vibrant.Swatch, LightVibrant: Vibrant.Swatch, Muted: Vibrant.Swatch, DarkMuted: Vibrant.Swatch, LightMuted: Vibrant.Swatch }, width: 300, height: 188, type: 'svg', // These will be added by sqip-plugin-data-uri dataURI: "data:image/svg+xml,...", dataURIBase64: 'data:image/svg+xml;base64,...' } }
Documentation for all 6 colors from the palette: Vibrant.Swatch
Plugins might add their own meta data
Multiple input images will result in an array of result objects.
This will run:
- Primitive with custom settings
- SVGO with default settings
For further configuration options see here
npm install -g sqip-cli@canary
This is the v1 alpha readme. You can find the current docs here.
Make sure to specify plugins when using --help to see the available plugin options.
sqip -h -p primitive -p blur -p svgo
Result:
sqip CLI Usage: sqip --input [path] "SQIP" (pronounced skwɪb like the non-magical folk of magical descent) is a SVG-based LQIP technique - https://github.com/technopagan/sqip Options -h, --help Show help --version Show version number -p, --plugins string[] One or more plugins. E.g. "-p primitive blur" -i, --input string -o, --output string Save the resulting SVG to a file. The svg result will be returned by default. -n, --primitive-numberOfPrimitives number The number of primitive shapes to use to build the SQIP SVG -m, --primitive-mode number The style of primitives to use: 0=combo, 1=triangle, 2=rect, 3=ellipse, 4=circle, 5=rotatedrect, 6=beziers, 7=rotatedellipse, 8=polygon -b, --blur-blur number Set the GaussianBlur SVG filter value. Disable it via 0. Examples Output input.jpg image as SQIP $ sqip --input /path/to/input.jpg Save input.jpg as result.svg with 25 shapes and no blur $ sqip -i input.jpg -n 25 -b 0 -o result.svg
$ sqip -i __tests__/fixtures/beach.jpg Processing: __tests__/fixtures/beach.jpg [Preview image (iTerm2 users only)] ┌───────────────┬────────────────┬───────┬────────┬──────┐ │ originalWidth │ originalHeight │ width │ height │ type │ ├───────────────┼────────────────┼───────┼────────┼──────┤ │ 1024 │ 640 │ 300 │ 188 │ svg │ └───────────────┴────────────────┴───────┴────────┴──────┘ ┌─────────┬─────────────┬──────────────┬─────────┬───────────┬────────────┐ │ Vibrant │ DarkVibrant │ LightVibrant │ Muted │ DarkMuted │ LightMuted │ ├─────────┼─────────────┼──────────────┼─────────┼───────────┼────────────┤ │ #dd852f │ #be4e0c │ #f2b17a │ #5c8fa4 │ #694e35 │ #cfc8b7 │ └─────────┴─────────────┴──────────────┴─────────┴───────────┴────────────┘
sqip -p primitive -p blur -p svgo
-i "demo/*.jpg"
-b 6
For further configuration options see here
The configuration consists of three parts. A required input, an optional output path and a configuration of plugins to be applied on the images.
Input file or directory. Supports feature rich globbing via micromatch.
CLI usage: -i/--input
If set, the output will be written to the given file or directory.
Otherwise, results will be output to CLI
CLI usage: -o/--output
Set the width of the resulting image. Negative values and 0 will fall back to the original image width.
CLI usage: -w/--width
Default: ['primitive', 'svgo']
Array of plugins. Either as a string (default config will be applied) or as a config object.
Example:
await sqip({ ... plugins: [ { name: 'sqip-plugin-primitive', options: { numberOfPrimitives: 8, mode: 0, }, }, `sqip-plugin-svgo`, ], })
CLI usage:
-p/--plugins
- Can be specified multiple times:
-p svgo -p blur - If prefix was skipped, plugin names will be transformed to:
sqip-plugin-[name] - To set plugin options, see plugin specifc config
- See the Plugins section for a list of available plugins.
- List all plugins subcommands by adding the plugin plus using the help parameter. For example:
-p blur -p svgo -hwill list you all options of the blur and the svgo plugins. - Follows the pattern
--[plugin-name]-[option]=[value]
Example:
Set blur option of blur plugin to 3. You could use the -b shortcut as well.
sqip -i foo.jpg -p primitive -p blur -blur-blur 3
non-TTY consoles and when the --parseable-output input flag is set, the output will be the following:
$ sqip -i __tests__/fixtures/beach.jpg --parseable-output Processing: __tests__/fixtures/beach.jpg originalWidth originalHeight width height type 1024 640 300 188 svg Vibrant DarkVibrant LightVibrant Muted DarkMuted LightMuted #dd852f #be4e0c #f2b17a #5c8fa4 #694e35 #cfc8b7
No output at all on STDOUT. The process will still return an error code & message when something failed.
Outputs resulting SVG to STDOUT. Ignores --silent and works with --parseable-output.
SQIP come
Leave a comment