IPX

High performance, secure and easy-to-use image optimizer.

Image processing
unjs/ipxipx

README

🖼️ IPX


[!NOTE]

This is the active branch for IPX v2. Check out ipx/v1 for v1 docs.


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

Used by Nuxt Image and Netlify and open to everyone!

Using CLI


You can use ipx command to start server.

Using npx:

  1. ```bash
  2. npx ipx serve --dir ./
  3. ```

Usin bun

  1. ```bash
  2. bun x npx ipx serve --dir ./
  3. ```

The default serve directory is the current working directory.

Programatic API


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

  1. ```ts
  2. import { createIPX, ipxFSStorage, ipxHttpStorage } from "ipx";

  4. const ipx = createIPX({
  5.   storage: ipxFSStorage({ dir: "./public" }),
  6.   httpStorage: ipxHttpStorage({ domains: ["picsum.photos"] }),
  7. });
  8. ```

Example: Using with unjs/h3:

  1. ```js
  2. import { listen } from "listhen";
  3. import { createApp, toNodeListener } from "h3";
  4. import {
  5.   createIPX,
  6.   ipxFSStorage,
  7.   ipxHttpStorage,
  8.   createIPXH3Handler,
  9. } from "ipx";

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

  16. const app = createApp().use("/", createIPXH3Handler(ipx));

  18. listen(toNodeListener(app));
  19. ```

Example: Using express:

  1. ```js
  2. import { listen } from "listhen";
  3. import express from "express";
  4. import {
  5.   createIPX,
  6.   ipxFSStorage,
  7.   ipxHttpStorage,
  8.   createIPXNodeServer,
  9. } from "ipx";

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

  16. const app = express().use("/", createIPXNodeServer(ipx));

  18. listen(app);
  19. ```

URL Examples


Get original image:

/_/static/buffalo.png

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

/f_webp/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