A route handler to transform images with Mastro. For example to resize images, or compress them into WebP format.

Uses @imagemagick/magick-wasm under the hood.

Install

Deno

deno add jsr:@mastrojs/images

Node.js

pnpm add jsr:@mastrojs/images

Bun

bunx jsr add @mastrojs/images

Usage

With /routes/_images/[...slug].server.ts containing the following route handler (which specifies an image preset called small):

import { createImagesRoute } from "@mastrojs/images";
export const { GET, getStaticPaths } = createImagesRoute({
  small: {
    format: "WEBP", // WEBP is the default, so could remove this line
    transform: image => image.resize(300, 300),
  },
});

and an image placed at /images/blue-marble.jpg, you can use the transformed image with:

<img src="/_images/small/blue-marble.jpg.webp" alt="Planet Earth">

You can name your image presets whatever you want – small is just an example. The image that the transform callback receives is a IMagickImage, on which you can call methods like .resize(64, 64) etc.

To learn more, see the @mastrojs/images API docs and Mastro Guide: Transforming images.

For a statically generated site, this is all you need to do. If you're running Mastro as a server, read the section Build step in the Mastro Guide to pregenerate the images.