@resizebento/image-resizer

Browser-first image resizing and format conversion for JavaScript and TypeScript.

Built by ResizeBento.com, a collection of privacy-friendly image tools that process files locally in the browser.

Install

npm install @resizebento/image-resizer

Quick start

import { resizeImage } from '@resizebento/image-resizer';

const input = fileInput.files?.[0];
if (!input) throw new Error('Select an image first');

const result = await resizeImage(input, {
  width: 800,
  height: 600,
  mode: 'crop-to-fit',
  format: 'webp',
  quality: 80,
});

const url = URL.createObjectURL(result.blob);

Resize by percentage

import { resizeImageByPercentage } from '@resizebento/image-resizer';

const result = await resizeImageByPercentage(file, 50, {
  format: 'jpg',
  quality: 85,
});

console.log(result.width, result.height);

Read image dimensions

import { getImageDimensions } from '@resizebento/image-resizer';

const dimensions = await getImageDimensions(file);
console.log(dimensions.width, dimensions.height);

Resize modes

| Mode | Behavior | | --- | --- | | crop-to-fit | Center-crops the source to completely fill the requested dimensions. | | stretch | Stretches the source directly to the requested dimensions. | | add-padding | Fits the complete source inside the requested dimensions and fills the remaining area with a padding color. | | fill-frame | Uses the same centered cover behavior as ResizeBento's Fill Frame mode. |

Output formats

The package can encode:

• WebP
• JPG
• PNG

quality uses a value from 10 to 100 for WebP and JPG. PNG ignores quality because browser canvas PNG encoding does not expose a quality control.

const result = await resizeImage(file, {
  width: 1200,
  height: 630,
  mode: 'add-padding',
  paddingColor: '#ffffff',
  format: 'jpg',
  quality: 90,
});

API

resizeImage(input, options)

Accepts a JPEG, PNG, or WebP Blob or File and returns a resized Blob plus output metadata.

type ResizeImageOptions = {
  width: number;
  height: number;
  mode?: 'crop-to-fit' | 'add-padding' | 'stretch' | 'fill-frame';
  format?: 'webp' | 'jpg' | 'png';
  quality?: number;
  paddingColor?: string;
};

Defaults are exported through imageResizerConfig. The default mode is crop-to-fit, the default output format is webp, and the default quality is 80.

resizeImageByPercentage(input, percentage, options?)

Scales both source dimensions by the supplied percentage. Supported percentages range from 1 to 500.

getImageDimensions(input)

Returns the decoded width and height without resizing the image.

ImageResizerError

Validation, decoding, canvas, and encoding failures throw ImageResizerError. The code property can be used for application-specific error messages.

import { ImageResizerError, resizeImage } from '@resizebento/image-resizer';

try {
  await resizeImage(file, { width: 800, height: 600 });
} catch (error) {
  if (error instanceof ImageResizerError) {
    console.error(error.code);
  }
}

Browser requirements

The package uses modern browser APIs:

• createImageBitmap
• Canvas 2D
• HTMLCanvasElement.toBlob

It has no runtime dependencies and no native binaries.

Privacy

Image processing runs locally in the browser. This package does not upload image content to ResizeBento.

For interactive image tools, visit ResizeBento.com.

License

MIT