- Notifications
You must be signed in to change notification settings - Fork0
🖼️ High performance, secure and easy-to-use image optimizer.
License
ucw/ipx
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Note
This is the active branch for IPX v2. Check outipx/v1 for v1 docs.
High performance, secure and easy-to-use image optimizer powered bysharp andsvgo.
Used byNuxt Image andNetlify and open to everyone!
You can useipx command to start server.
Usingnpx:
npx ipx serve --dir ./
Usinbun
bun x npx ipx serve --dir ./
The default serve directory is the current working directory.
You can use IPX as a middleware or directly use IPX interface.
import{createIPX,ipxFSStorage,ipxHttpStorage}from"ipx";constipx=createIPX({storage:ipxFSStorage({dir:"./public"}),httpStorage:ipxHttpStorage({domains:["picsum.photos"]}),});
Example: Using withunjs/h3:
import{listen}from"listhen";import{createApp,toNodeListener}from"h3";import{createIPX,ipxFSStorage,ipxHttpStorage,createIPXH3Handler,}from"ipx";constipx=createIPX({storage:ipxFSStorage({dir:"./public"}),httpStorage:ipxHttpStorage({domains:["picsum.photos"]}),});constapp=createApp().use("/",createIPXH3Handler(ipx));listen(toNodeListener(app));
Example: Usingexpress:
import{listen}from"listhen";importexpressfrom"express";import{createIPX,ipxFSStorage,ipxHttpStorage,createIPXNodeServer,}from"ipx";constipx=createIPX({storage:ipxFSStorage({dir:"./public"}),httpStorage:ipxHttpStorage({domains:["picsum.photos"]}),});constapp=express().use("/",createIPXNodeServer(ipx));listen(app);
Get original image:
/_/static/buffalo.png
Change format towebp and keep other things same as source:
/f_webp/static/buffalo.png
Keep original format (png) and set width to200:
/w_200/static/buffalo.png
Resize to200x200px usingembed method and change format towebp:
/embed,f_webp,s_200x200/static/buffalo.png
You can universally customize IPX configuration usingIPX_* environment variables.
IPX_ALIAS- Default:
{}
- Default:
(enabled by default with CLI only)
- Default:
.(current working directory)
- Default:
300
(enabled by default with CLI only)
- Default:
[]
- Default:
300
- Default:
{}
- Default:
false
| Property | Docs | Example | Comments |
|---|---|---|---|
| width / w | Docs | /width_200/buffalo.png | |
| height / h | Docs | /height_200/buffalo.png | |
| resize / s | Docs | /s_200x200/buffalo.png | |
| kernel | Docs | /s_200x200,kernel_nearest/buffalo.png | Supported kernel:nearest,cubic,mitchell,lanczos2 andlanczos3 (default). |
| fit | Docs | /s_200x200,fit_outside/buffalo.png | Setsfit option forresize. |
| position / pos | Docs | /s_200x200,pos_top/buffalo.png | Setsposition option forresize. |
| trim | Docs | /trim_100/buffalo.png | |
| extend | Docs | /extend_{top}_{right}_{bottom}_{left}/buffalo.png | Extend / pad / extrude one or more edges of the image with either the provided background colour or pixels derived from the image. |
| background / b | _ | /r_45,b_00ff00/buffalo.png | |
| extract | Docs | /extract_{left}_{top}_{width}_{height}/buffalo.png | Extract/crop a region of the image. |
| format / f | Docs | /format_webp/buffalo.png | Supported format:jpg,jpeg,png,webp,avif,gif,heif,tiff andauto (experimental only with middleware) |
| quality / q | _ | /quality_50/buffalo.png | Accepted values: 0 to 100 |
| rotate | Docs | /rotate_45/buffalo.png | |
| enlarge | _ | /enlarge,s_2000x2000/buffalo.png | Allow the image to be upscaled. By default the returned image will never be larger than the source in any dimension, while preserving the requested aspect ratio. |
| flip | Docs | /flip/buffalo.png | |
| flop | Docs | /flop/buffalo.png | |
| sharpen | Docs | /sharpen_30/buffalo.png | |
| median | Docs | /median_10/buffalo.png | |
| blur | Docs | /blur_5/buffalo.png | |
| gamma | Docs | /gamma_3/buffalo.png | |
| negate | Docs | /negate/buffalo.png | |
| normalize | Docs | /normalize/buffalo.png | |
| threshold | Docs | /threshold_10/buffalo.png | |
| tint | Docs | /tint_1098123/buffalo.png | |
| grayscale | Docs | /grayscale/buffalo.png | |
| animated | - | /animated/buffalo.gif | Experimental |