Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Separate CLI and API #1002

Merged
merged 6 commits into from
May 19, 2021
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@
[Squoosh] is an image compression web app that allows you to dive into the advanced options provided
by various image compressors.

# CLI
# API & CLI

[Squoosh now has a CLI](https://github.com/GoogleChromeLabs/squoosh/tree/dev/cli) that allows you to compress many images at once.
Squoosh now has [an API](https://github.com/GoogleChromeLabs/squoosh/tree/dev/api) and [a CLI](https://github.com/GoogleChromeLabs/squoosh/tree/dev/cli) that allows you to compress many images at once.

# Privacy

Expand Down
3 changes: 3 additions & 0 deletions api/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
node_modules
build
.DS_Store
1 change: 1 addition & 0 deletions api/.npmignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
node_modules
Empty file added api/.npmrc
Empty file.
161 changes: 161 additions & 0 deletions api/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,161 @@
# Squoosh API

Squoosh API is an _experimental_ way to run all the codecs you know from the [Squoosh] web app directly inside your own JavaScript program. The Squoosh API uses a worker pool to parallelize processing images. This way you can apply the same codec to many images at once.

Squoosh API is currently not the fastest image compression tool in town and doesn’t aim to be. It is, however, fast enough to compress many images sufficiently quick at once.

## Installation

The Squoosh API can be installed to your local project with the following command:

```
$ npm install @squoosh/api
```

You can start using the API by adding these lines to the top of your JS program:

```js
import { ImagePool } from '@squoosh/api';
const imagePool = new ImagePool();
```

This will create an image pool with an underlying processing pipeline that you can use to ingest and encode images. The ImagePool constructor takes one argument that defines how many parallel operations it is allowed to run at any given time. By default, this number is set to the amount of CPU cores available in the system it is running on.

## Ingesting images

You can ingest a new image like so:

```js
const imagePath = 'path/to/image.png';
const image = imagePool.ingestImage(imagePath);
```

These `ingestImage` function can take anything the node [`readFile`][readFile] function can take, uncluding a buffer and `FileHandle`.

The returned `image` object is a representation of the original image, that you can now manipulate, encode, and extract information about.

## Manipulating and encoding images

When an image has been ingested, you can start manipulating it and encoding it to other formats. This example will resize the image and then encode it to a `.jpg` and `.jxl` image:

```js
await image.decoded; //Wait until the image is decoded before running manipulations

const manipulateOptions: {
resize: {
enabled: true,
width: 100,
height: 50,
}
}
await image.manipulate(manipulateOptions);

const encodeOptions: {
mozjpeg: {}, //an empty object means 'use default settings'
jxl: {
quality: 90,
},
}
await image.encode(encodeOptions);

```

The default values for each option can be found in the [`codecs.js`][codecs.js] file under `defaultEncoderOptions`. Every unspecified value will use the default value specified there. _Better documentation is needed here._

You can run your own code inbetween the different steps, if, for example, you want to change how much the image should be resized based on its original height. (See [Extracting image information](#extracting-image-information) to learn how to get the image dimensions).

## Closing the ImagePool

When you have encoded everything you need, it is recommended to close the processing pipeline in the ImagePool. This will not delete the images you have already encoded, but it will prevent you from ingesting and encoding new images.

Close the ImagePool pipeline with this line:

```js
await imagePool.close();
```

## Writing encoded images to the file system

When you have encoded an image, you normally want to write it to a file.

This example takes an image that has been encoded as a `jpg` and writes it to a file:

```js
const rawEncodedImage = (await image.encodedAs.jpg).binary;

fs.writeFile('/path/to/new/image.jpg', rawEncodedImage);
```

This example iterates through all encoded versions of the image and writes them to a specific path:

```js
const newImagePath = '/path/to/image.'; //extension is added automatically

for(const [extension, encodedImage] of Object.entries(image.encodedAs)){
fs.writeFile(newImagePath + extension, (await encodedImage).binary);
}
```


## Extracting image information

Information about a decoded image is available at `Image.decoded`. It looks something like this:

```js
console.log(await image.decoded);
// Returns:
{
bitmap: {
data: Uint8ClampedArray(47736584) [
225, 228, 237, 255, 225, 228, 237, 255, 225, 228, 237, 255,
225, 228, 237, 255, 225, 228, 237, 255, 225, 228, 237, 255,
225, 228, 237, 255,
... //the entire raw image
],
width: 4606, //pixels
height: 2591 //pixels
},
size: 2467795 //bytes
}
```

Information about an encoded image can be found at `Image.encodedAs[extension]`. It looks something like this:


```js
console.log(await image.encodedAs.jxl);
// Returns:
{
optionsUsed: {
quality: 75,
baseline: false,
arithmetic: false,
progressive: true,
... //all the possible options for this encoder
},
binary: Uint8Array(1266975) [
1, 0, 0, 1, 0, 1, 0, 0, 255, 219, 0, 132,
113, 119, 156, 156, 209, 1, 8, 8, 8, 8, 9, 8,
9, 10, 10, 9,
... //the entire raw encoded image
],
size: 1266975 //bytes
}
```

## Auto optimizer

Squoosh API has an _experimental_ auto optimizer that compresses an image as much as possible, trying to hit a specific [Butteraugli] target value. The higher the Butteraugli target value, the more artifacts can be introduced.

You can make use of the auto optimizer by using “auto” as the config object.

```
const encodeOptions: {
mozjpeg: 'auto',
}
```

[squoosh]: https://squoosh.app
[codecs.js]: https://github.com/GoogleChromeLabs/squoosh/blob/dev/cli/src/codecs.js
[butteraugli]: https://github.com/google/butteraugli
[readFile]: https://nodejs.org/api/fs.html#fs_fspromises_readfile_path_options
File renamed without changes.
File renamed without changes.
File renamed without changes.
Loading