Zenn
🙌

minify-imagesについて

2022/07/05に公開
npm
JavaScript
tech

@itkyk/minify-images

どう使うの？なにができるの？

@itkyk/minify-imagesは、Node製の画像圧縮ライブラリです。
実際にイメージを圧縮している機構は、@sqoosh/libとsvgoになります。
@sqooshは、WebサイトからGUIでリアルタイムに画像圧縮の結果を見ながら、圧縮設定を決めることができるため、ユーザーフレンドリーでエンジニア以外とのコミュニケーションを円滑に進めることができます。

例えば、画像圧縮設定をデザイナーが指示したい場合、デザイナーはsqooshから、圧縮具合を決め、そこからパラメータを取得し、エンジニアに共有することで、実装側で再現することができます。
本ライブラリでは、jpg/png等の画像圧縮は@sqooshに依存しているため、このパラメータを共有することができます。
@sqooshではsvg画像の圧縮はできないですが、本ライブラリにはsvgoを内包することで一つのライブラリから全ての画像形式を一括圧縮することが可能です。

また、CLI/API両方に対応しているので、CLIでテスト運用することや、APIであなたの求めるフローに組み込むことや、複雑にカスタマイズすることも可能です。

Sqooshからの設定プロパティの取得方法

  1. sqooshにアクセスし、画像をページにDrag & Drop
  2. 圧縮具合をパラメータを調整し、決定する。(本ライブラリのデフォルト値は、パラメータを何も調整していないものと同等になっています。)
  3. パラメータをコピーする。
  4. コピーされたコードを共有する。
    例) npx @squoosh/cli --mozjpeg '{"quality":75}'
  5. 例であれば、--moxjpeg以下をCLIまたはAPIのパラメータにコピー
    // CLI
$ minify -i ./input -o ./output --mozjpeg '{"quality":75}'

    // API
import Minify, {ImageMinOptionInterface} from "@itkyk/minify-images";
const option: ImageMinOptionInterface = {
 inputPath: "./input/",
 outputPath: "./output",
 encodeOptions: {
  mozjpeg: {
   "quality":75
  }
 }
}
new Minify(option);

APIで使う場合

import Minify, {ImageMinOptionInterface} from "@itkyk/minify-images";

const options: ImageMinOptionInterface = {
  inputPath: "inputDir/to/path",
  outputPath: "outputDir/to/Path",
  encodeOptions: {
    mozjpeg: {},// sqooshから取得できる、mozjpegのオプション群(deep merge)
    oxipng: {}, // sqooshから取得できる、oxpngのオプション群(deep merge)
    quant: {}, // sqooshから取得できる、quantのオプション群(deep merge)
    svgo: [] // svgoのオプション群(上書き)
  }
}

new Minify(options); // minify start

CLIで使う場合

// デフォルトの設定で起動
$ minify --input ./inputDir/to/path --output outputDir/to/path

// オプション
$ minify --input ./inputDir/to/path --output outputDir/to/path --mozjpeg '{}' --oxpng '{}' --quant '{}' --svgo '[]'

Options

API

key description required?
inputPath 圧縮する画像が格納されているディレクトリを指定します。 required
outputPath 圧縮したファイルを吐き出すディレクトリを指定します。 required
encodeOptions このオブジェクトの中に各拡張子の圧縮設定を記述します。
mozjpeg moxjpegの圧縮設定を指定できます。
oxipng oxpngの圧縮設定を指定できます。
quant quantの圧縮設定を指定できます。
svgo svgoの圧縮設定を指定できます。

CLI

key description required?
-i, --input 圧縮する画像が格納されているディレクトリを指定します。 required
-o, --output 圧縮したファイルを吐き出すディレクトリを指定します。 required
-m, --mozjpeg moxjpegの圧縮設定を指定できます。
-ox, --oxipng oxpngの圧縮設定を指定できます。
-q, --quant quantの圧縮設定を指定できます。

Features

今後は以下をアップデートしていきます。

  • リサイズの指定ができるように。
  • jpg/png以外の拡張子の圧縮ができるように(sqooshが対応している拡張子の対応。webpなど)
  • svgoの設定をCLIからでもできるように。
npm github

Discussion