ImageKit

Unpic can transform images with ImageKit using the imagekit 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 imagekit provider from the unpic package using a subpath import:

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

If using an Unpic component, you can optionally pass custom operations and options to the component using an object with a imagekit key. This is lets you use extra features supported by ImageKit, 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={{
      "imagekit": {
      // imagekit options here
      }
  }}
  operations={{
      "imagekit": {
      // imagekit 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/imagekit';
---
<Image
  src="image.jpg"
  width={800}
  height={600}
  transformer={transformer}
/>

Types

The imagekit provider supports the following arguments:

Options

The imagekit provider does not support any extra configuration options.

Operations

w

Type: string | number

Resize image width in pixels or percentage. Example: w=300 or w=0.5 (50% of the original width)

h

Type: string | number

Resize image height in pixels or percentage. Example: h=200 or h=0.5 (50% of the original height)

ar

Type: string

Aspect ratio of the output image. Example: ar=16:9

c

Type: "maintain_ratio" | "extract" | "pad_resize" | "force" | "at_max" | "at_least"

Crop strategy for the image. Options: ‘maintain_ratio’, ‘extract’, ‘pad_resize’, ‘force’, ‘at_max’, ‘at_least’

fo

Type: (string & {}) | "center" | "top" | "right" | "bottom" | "left" | "top_right" | "top_left" | "bottom_right" | "bottom_left" | "auto"

Focal point for cropping. Can also pass object types for smart cropping.

bg

Type: string

Set the background color for padding. Example: bg=FFFFFF for white background.

r

Type: number

Rotate the image by a specified degree. Example: r=90 for a 90-degree rotation.

s

Type: number

Adjust sharpness of the image. Value between 1-100. Example: s=50 for moderate sharpness.

blur

Type: number

Adjust the blur level of the image. Value between 1-100. Example: blur=5 for light blur.

q

Type: number

Quality of the image, represented as a percentage between 1-100. Example: q=80 for 80% quality.

dpr

Type: number

Device pixel ratio for high-resolution displays. Example: dpr=2 for retina display.

chain

Type: string

Chained transformations, separated by a colon. Example: w-300,h-300:fo-center to resize and center the image.

f

Type: ImageFormat

Format of the output image. Options: ‘jpg’, ‘png’, ‘gif’, ‘webp’, ‘avif’

di

Type: string

Add a default image if the requested image is not found. Example: di=default.jpg

bo

Type: string

Add a border around the image. Specify thickness in pixels. Example: bo=5_000000 for a 5px black border.

rt

Type: number

Apply round corners to the image. Example: rt=20 for 20px radius.

width

Type: string | number

height

Type: string | number

format

Type: (string & {}) | ImageFormat

quality

Type: string | number

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