Skip to main content
Image Processing PipelineAn image build orchestrator for the modern web
Image Processing Pipeline is a platform agnostic modular collection of packages that glues together some of the best image libraries using an easily configurable pipeline.

Simple

Designed to by usable by anyone. It's modularity makes it possible to be used as a simple command-line tool or with deeper integration with an existing build process.

Powerful

It's fast. It uses modern compiled image libraries such as libvips to get that extra edge. A YAML/JSON pipeline lets you piece together pipes to customise the process.

Open Source

Image Processing Pipeline is released under the permissive open-source MIT license. You can inspect the code, modify it and use it commercially, for free!

Demo

Play around with the buttons below to see some examples of generated images. Each image is from a high-quality source generously provided by Unsplash. You can see the untouched original using the Original selector.

An ideal pattern would be to embed a tiny SVG preview to act as a placeholder until the higher-quality device-optimised image has been loaded. The preview can then be faded out and replaced. WebP is a superior web image codec, but is not supported by all browsers. That is why a fallback JPEG is also generated.

Select a format
Information will be shown here
Show the pipeline configuration

What is it?

Image Processing Pipeline is a harmonious collection of packages that automate the image build process. Users can define a processing pipeline in a text format that tells IPP what to do with each source image, such as resizing the image, compressing the image or creating different responsive variants. It is fast, non-destructive and focuses on quality.

IPP does not implement any image processing algorithms, it is merely a wrapper around existing image libraries, such as libvips or Michael Fogleman's primitive SVG algorithm, written in Go (which is amazing, and yet has not seen much of the light of day). It is written in TypeScript (a statically typed superset of JavaScript) and runs on Node.js, the de-facto dominant platform for web-development related tools. It is therefore cross-platform and, most importantly, framework agnostic, meaning you can use this in any project you like. There are two official interfaces for IPP, the command-line tool and the webpack loader, however, you can easily create your own adapter for whatever build process you would like to use.

IPP was created out of a lack of other solutions. It was meant to be an optimal no-comprises solution to image optimisation for the modern web. It is therefore designed in a particular way, and some of the higher-level modules are more opinionated, such as the manifest format. If this is not your style, you can use only the core functions and design your own export formats.

How it works

Pipeline

At the heart is a user-defined pipeline. A pipeline is a collection of pipes that can be assembled in any tree-like pattern, along with any additional options and an optional save key that will mark the pipe's output for export.

Pipe

Pipes are simple asynchronous functions that take a source image and output any number of formats. Pipes can apply any transformation to the source image, such as resizing, compressing or converting the image.

Metadata

Every image is accompanied by a metadata object, which is a collection of key-value pairs that describe the image. Pipes may modify an image's metadata object, which can later be used to customise the output filename or to create an image manifest file.

This section is still a work in progressBear with us