ImageEngine

Unpic can transform images with ImageEngine using the imageengine provider. It can be used with Unpic framework components, or you can use the base unpic libary to generate image URLs directly.

You can import the imageengine provider from the unpic package using a subpath import:

import { transform } from 'unpic/providers/imageengine';

If using an Unpic component, you can optionally pass custom operations and options to the component using an object with a imageengine key. This is lets you use extra features supported by ImageEngine, or set custom configuration options.

This example uses @unpic/astro, but the same applies to any Unpic component:

---
import { Image } from '@unpic/astro';
---
<Image
  src="image.jpg"
  width={800}
  height={600}
  options={{
      "imageengine": {
      // imageengine options here
      }
  }}
  operations={{
      "imageengine": {
      // imageengine operations here
      }
  }}
/>

In supported frameworks you can also import the base component and pass the transformer to it directly. This lets you create a custom component that doesn’t need to include and other transformer code.

---
import { Image } from '@unpic/astro/base';
import { transform } from 'unpic/providers/imageengine';
---
<Image
  src="image.jpg"
  width={800}
  height={600}
  transformer={transformer}
/>

Types

The imageengine provider supports the following arguments:

Options

The imageengine provider does not support any extra configuration options.

Operations

w

Type: number

h

Type: number

f

Type: ImageFormat | "gif" | "bmp" | "jp2" | "jxl"

cmpr

Type: number

Compression level of the image (0-99). Higher values reduce quality and size. Example: cmpr=50 for 50% compression.

m

Type: "outside" | "stretch" | "box" | "letterbox" | "cropbox"

Method used to fit the image into the specified dimensions. Supported values: ‘stretch’, ‘box’, ‘letterbox’, ‘cropbox’, ‘outside’. Example: m=cropbox to crop the image inside the bounding box.

pass

Type: boolean

Whether to pass through the original image unmodified. Example: pass=true to bypass transformations.

s

Type: number

Sharpness level of the image (0-100). Higher values increase sharpness. Example: s=20 for moderate sharpening.

r

Type: number

Rotate the image by a specific number of degrees (-360 to 360). Example: r=90 to rotate the image 90 degrees clockwise.

pc

Type: number

Scale the image as a percentage of the screen (1-100). Example: pc=50 to scale the image to 50% of the screen size.

cr

Type: [number, number, number, number]

Crop the image using four values: width, height, left, and top. Example: cr=200,200,50,50 to crop a 200x200px image starting 50px from the left and 50px from the top.

meta

Type: boolean

Retain EXIF metadata in the image. Example: meta=true to keep EXIF data.

dl

Type: boolean

Forces the image to be downloaded rather than displayed. Example: dl=true to trigger download behavior.

maxdpr

Type: number

Maximum device pixel ratio to consider when resizing and optimizing the image. Example: maxdpr=2.1 to limit DPR considerations to 2.1.

width

Type: string | number

height

Type: string | number

format

Type: ImageFormat | "gif" | "bmp" | "jp2" | "jxl"

quality

Type: string | number

This page is auto-generated from the imageengine provider types. See anything wrong or missing? Suggest a change on GitHub.