asset-resizer

A minimal package to easily automate image asset resizing as a part of a build process. Uses sharp.

Getting Started

Install asset-resizer with:

npm i asset-resizer --save-dev

Then add assetresizer.config.js to your root directory, specifying what assets should be resized and where. Alternatively, you may specify a custom config file.

See example config.

// assetresizer.config.js
// alt: module.exports = {
export default {
  baseUrl: ".",
  inputDir: "assets",
  outputDir: "build",
  flatten: true,
  assets: [
    {
      file: "icon.png",
      output: [
        {
          file: "icon512.png",
          width: 512,
        },
        {
          file: "icon32.png",
          width: 32,
        },
        //...
      ],
    },
    //...
  ],
};

Command Line Usage

Run:

asset-resizer parse
asset-resizer parse --config=custom.config.js

Validate config file:

asset-resizer config
asset-resizer config --config=custom.config.js

Add these lines to your package.json to integrate into your build workflow.

Programmatic Usage

Alternatively, you can use this package programmatically. See examples.

TypeScript / ESModule

import { parseAllAssets, AssetResizerConfig } from "asset-resizer";

const config: AssetResizerConfig = {
  baseUrl: ".",
  inputDir: "assets",
  outputDir: "build",
  flatten: true,
  assets: [
    //...
  ],
};

parseAllAssets(config).then(() => {
  console.log("done");
});

CommonJS

const { parseAllAssets } = require("asset-resizer");

parseAllAssets({
  baseUrl: ".",
  inputDir: "assets",
  outputDir: "build",
  flatten: true,
  assets: [
    //...
  ],
}).then(() => {
  console.log("done");
});

Configuration Options

AssetResizerConfig

| Option | Type | Description | Default | | ----------- | -------------------------- | ------------------------------- | -------- | | baseUrl | string | Base url to run resizer from | . | | inputDir | string | Directory of input files | assets | | outputDir | string | Directory to build output files | build | | assets | Array<AssetResizerAsset> | Array of source assets | |

AssetResizerAsset

| Option | Type | Description | | -------- | --------------------------- | ------------------------------------------- | | file | string | Path to source asset relative to inputDir | | output | Array<AssetResizerOutput> | Array of output files to create |

AssetResizerOutput

| Option | Type | Description | | -------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | file | string | Name of file to create. Extension may be one of: jpg, png, webp, avif, tiff, gif, dzi, v. | | width | number? | Width, in pixels, of the target output file. One of width or copy must be present. | | height | number? | (optional) Height, in pixels, of the target output file. If not specified, uses width. | | copy | boolean? | Optionally copy the file instead of resizing. One of width or copy must be present. | | fit | string? | One of cover, contain, fill, inside, outside. Defaults to cover. See sharp documentation for details. |

Development

First run npm i, then npm link to link the cli bin asset-resizer to the development directory.

Building

npm run build

Tests

• npm run test will run Jest.
• npm run test:cli will run command from package.json.