All Projects → MarcusCemes → image-processing-pipeline

MarcusCemes / image-processing-pipeline

Licence: MIT License
An image build orchestrator for the modern web

Programming Languages

typescript
32286 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to image-processing-pipeline

Sharp
High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images. Uses the libvips library.
Stars: ✭ 21,131 (+49041.86%)
Mutual labels:  webp, libvips
Govips
A lightning fast image processing and resizing library for Go
Stars: ✭ 442 (+927.91%)
Mutual labels:  webp, libvips
Imaginary
Fast, simple, scalable, Docker-ready HTTP microservice for high-level image processing
Stars: ✭ 4,107 (+9451.16%)
Mutual labels:  webp, libvips
Libvips
A fast image processing library with low memory needs.
Stars: ✭ 6,094 (+14072.09%)
Mutual labels:  webp, libvips
Startup Landing
Collection of free top of the line startup landing templates built using react/nextjs/gatsby. Free to download, simply edit and deploy! Updated weekly!
Stars: ✭ 176 (+309.3%)
Mutual labels:  modern, responsive
ipx
High performance, secure and easy to use image proxy based on Sharp and libvips.
Stars: ✭ 683 (+1488.37%)
Mutual labels:  webp, libvips
Mort
Storage and image processing server written in Go
Stars: ✭ 420 (+876.74%)
Mutual labels:  webp, libvips
Bimg
Go package for fast high-level image processing powered by libvips C library
Stars: ✭ 1,394 (+3141.86%)
Mutual labels:  webp, libvips
Jekyll Theme Yat
🎨 Yet another theme for elegant writers with modern flat style and beautiful night/dark mode.
Stars: ✭ 113 (+162.79%)
Mutual labels:  modern, responsive
boba
A lightweight, modular CSS framework.
Stars: ✭ 47 (+9.3%)
Mutual labels:  modern, responsive
imagor
Fast, Docker-ready image processing server in Go and libvips
Stars: ✭ 2,276 (+5193.02%)
Mutual labels:  webp, libvips
spot-termination-exporter
Prometheus spot instance exporter to monitor AWS instance termination with Hollowtrees
Stars: ✭ 30 (-30.23%)
Mutual labels:  pipeline
metagraf
metaGraf is a opinionated specification for describing a software component and what its requirements are from the runtime environment. The mg command, turns metaGraf specifications into Kubernetes resources, supporting CI, CD and GitOps software delivery.
Stars: ✭ 15 (-65.12%)
Mutual labels:  pipeline
jekyll-grid
Jekyll theme (used on 25x52.com) displays posts in a grid. Ideal for projects
Stars: ✭ 63 (+46.51%)
Mutual labels:  responsive
pipelines-as-code
Pipelines as Code
Stars: ✭ 37 (-13.95%)
Mutual labels:  pipeline
design-studio one-page-template
Free responsive flat designed one page template
Stars: ✭ 67 (+55.81%)
Mutual labels:  responsive
vue-resize-text
A vue directive which automatically resize font size based on element width.
Stars: ✭ 65 (+51.16%)
Mutual labels:  responsive
breakpoints-js
Awesome Breakpoints in JavaScript. (bootstrap supported)
Stars: ✭ 70 (+62.79%)
Mutual labels:  responsive
ml-stack-nav
Customizable, responsive, accessible, easy-to-use multi-level stack navigation menu with slide effect.
Stars: ✭ 20 (-53.49%)
Mutual labels:  responsive
react-responsive-spritesheet
React component which helps you to easily apply responsive spritesheet animations on your project.
Stars: ✭ 82 (+90.7%)
Mutual labels:  responsive

Maintenance notice

This project is inactively maintained.

It works, I use it for my personal projects, but the documentation is incomplete and I don't have the time to actively continue developing the project.

I am around to answer any questions in the discussions tab. Use at your own risk!



Logo

Image Processing Pipeline


An image build orchestrator for the modern web
Website »

Report Bug · Request Feature

npm   Code coverage   Node.js   Typescript   Make the web lighter

Image Processing Pipeline is a platform-agnostic modular collection of packages that aims to glue together various image libraries into and configurable automated pipeline.

Philosophy

Images make your websites pop, but they are also the largest asset that you serve to your client. Correctly optimising images provides a much better experience, by not wasting your visitors' bandwidth, battery and making the navigation of your website smoother.

At its highest level, Image Processing Pipeline is a command line tool that helps you automate your website's image build process in a non-destructive way, with speed and quality in mind. At a lower level, it is a modular set of functions that can be integrated into any existing backend service.

How it works

Image Processing Pipeline is built on top of three key concepts:

🌴 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.

Features

  • Fast - Uses the amazing libvips image processing library
  • 🔥 Parallel - Scales to any amount of available cores
  • 💎 Lanczos3 - Quality-first image down-scaling algorithm
  • 📦 Works out of the box - Uses a sane default configuration
  • 🌍 Universal - Designed to works anywhere without lock-in
  • ✂️ Cross-platform - Tested on Windows, macOS and Linux
  • 😊 Friendly - an easy to use CLI experience

Getting started

Prerequisites

  • Node.js v10.8 or higher
  • npm

Installation

It is recommended to install IPP as a dependency of your project, this is just an example to quickly try it out

To give IPP a go on the command line, you will need to install the CLI package:

$ npm i -g @ipp/cli

This will add IPP to your path. Find a folder of images, and give it a go:

$ ipp -i folder/with/images -o output/folder

Configuration

In order to get the most out of IPP you need to set up a configuration file with all of your persistent values. This can be in your package.json, or in a file named .ipprc, .ipprc.yml or .ipprc.json.

Then all you need to do is run ipp from the terminal!

.ipprc.yml

# These will be the folders that will get processed,
# relative to the current working directory
input: folder/with/images
output: folder/with/images

# Remove this part to disable manifest generation
manifest:
  source:
    p: path
    x: "hash:8"
  format:
    w: width
    h: height
    f: format
    p: path
    x: "hash:8"

# Here is where you customise the pipeline
# This is what the default pipeline looks like
pipeline:
  - pipe: resize
    options:
      breakpoints:
        - name: sm
          resizeOptions:
            width: 480
        - name: md
          resizeOptions:
            width: 720
        - name: lg
          resizeOptions:
            width: 1920
        - name: xl
          resizeOptions:
            width: 3840
    save: "[name]-[breakpoint][ext]"
    then:
      - pipe: convert
        options:
          format: webp
        save: "[name]-[breakpoint][ext]"

Ready for more?

Check out the website for complete documentation on how to use Image Processing Pipeline.

Contributing

Contributions are what makes the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feat/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feat/AmazingFeature)
  5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.


Built with ❤︎ by Marcus Cemes
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].