Skip to content

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

License

Notifications You must be signed in to change notification settings

reiniiriarios/asset-resizer

Repository files navigation

asset-resizer

latest version downloads types: Typescript build

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.