🖼️ IPX

High performance, secure and easy-to-use image optimizer powered by sharp and svgo.

Used by Nuxt Image and Netlify and open to everyone!

Migration from v3 to v4

[!NOTE] This is the active development branch for IPX v4. Check out v3 for v3 docs.

• The server creation APIs have changed. See the Programmatic API section for examples.
• The JSON error format has changed from { error: string } to { status, statusText, message }.

Using CLI

You can use ipx command to start server.

Using npx:

npx ipx serve --dir ./

Using bun

bunx ipx serve --dir ./

The default serve directory is the current working directory.

Programmatic API

You can use IPX as a middleware or directly use IPX interface.

Example: Using built-in server

import { serveIPX, createIPX, ipxFSStorage, ipxHttpStorage } from "ipx";

const ipx = createIPX({
  storage: ipxFSStorage({ dir: "./public" }),
  httpStorage: ipxHttpStorage({ domains: ["picsum.photos"] }),
  alias: { "/picsum": "https://picsum.photos" },
});

// http://localhost:3000/w_512/picsum/1000
serveIPX(ipx);

Example: Using with h3

import { H3, serve } from "h3";

import {
  createIPX,
  ipxFSStorage,
  ipxHttpStorage,
  createIPXFetchHandler,
} from "ipx";

const ipx = createIPX({
  storage: ipxFSStorage({ dir: "./public" }),
  httpStorage: ipxHttpStorage({ domains: ["picsum.photos"] }),
  alias: { "/picsum": "https://picsum.photos" },
});

const app = new H3();

app.mount("/ipx", createIPXFetchHandler(ipx));

// http://localhost:3000/ipx/w_512/picsum/1000
serve(app);

Example: Using with express

import Express from "express";

import {
  createIPX,
  ipxFSStorage,
  ipxHttpStorage,
  createIPXNodeHandler,
} from "ipx";

import type { RequestHandler } from "express";

const ipx = createIPX({
  storage: ipxFSStorage({ dir: "./public" }),
  httpStorage: ipxHttpStorage({ domains: ["picsum.photos"] }),
  alias: { "/picsum": "https://picsum.photos" },
});

const app = Express();

app.use("/ipx", createIPXNodeHandler(ipx) as RequestHandler);

// http://localhost:3000/ipx/w_512/picsum/1000
app.listen(3000, () => {
  console.log("Server is running on http://localhost:3000");
});

URL Examples

Get original image:

/_/static/buffalo.png

Change format to webp and keep other things same as source:

/f_webp/static/buffalo.png

Automatically convert to a preferred format (avif/webp/jpeg). Uses the browsers accept header to negotiate:

/f_auto/static/buffalo.png

Keep original format (png) and set width to 200:

/w_200/static/buffalo.png

Resize to 200x200px using embed method and change format to webp:

/embed,f_webp,s_200x200/static/buffalo.png

Config

You can universally customize IPX configuration using IPX_* environment variables.

• IPX_ALIAS
  • Default: {}

Filesystem Source Options

(enabled by default with CLI only)

IPX_FS_DIR

• Default: . (current working directory)

IPX_FS_MAX_AGE

• Default: 300

HTTP(s) Source Options

(enabled by default with CLI only)

IPX_HTTP_DOMAINS

• Default: []

IPX_HTTP_MAX_AGE

• Default: 300

IPX_HTTP_FETCH_OPTIONS

• Default: {}

IPX_HTTP_ALLOW_ALL_DOMAINS

• Default: false

Modifiers

License

MIT