Imgix
Unpic can transform images with Imgix using the imgix 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 imgix provider from the unpic package using a subpath import:
import { transform } from 'unpic/providers/imgix';If using an Unpic component, you can optionally pass custom operations and options to the
component using an object with a imgix key. This is lets you use extra features supported
by Imgix, 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={{
"imgix": {
// imgix options here
}
}}
operations={{
"imgix": {
// imgix 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/imgix';
---
<Image
src="image.jpg"
width={800}
height={600}
transformer={transformer}
/>
Types
The imgix provider supports the following arguments:
Options
The imgix provider does not support any extra configuration options.
Operations
w
Type: number
h
Type: number
ar
Type: string
Aspect ratio, defined as width/height
fit
Type: "fill" | "crop" | "scale" | "clip" | "max" | "clamp" | "facearea" | "fillmax" | "min"
Fit mode to use when resizing.
crop
Type: string
Crop mode to use when resizing. Can be a combination of “top”, “bottom”, “left”, “right”, “faces”, etc.
dpr
Type: number
Device pixel ratio (useful for responsive images).
q
Type: number
Quality level (1-100) for lossy image formats.
fm
Type: ImixFormats
Output format for the image.
auto
Type: "format" | "compress" | "enhance" | "redeye"
Automatic optimizations to apply. Can be a combination of “format”, “compress”, “enhance”, “redeye”.
con
Type: number
Contrast adjustment (-100 to 100).
exp
Type: number
Exposure adjustment (-100 to 100).
sat
Type: number
Saturation adjustment (-100 to 100).
blur
Type: number
Blur radius to apply.
sharp
Type: number
Sharpening amount to apply.
sepia
Type: number
Sepia tone effect (0-100).
bg
Type: string
Background color in RGB/hex.
border
Type: string
Border size and color (e.g., 10px solid red).
txt
Type: string
Text overlay string.
txtFont
Type: string
Font to use for text overlay.
txtColor
Type: string
Color of the text overlay.
txtSize
Type: number
Font size for text overlay.
txtAlign
Type: "center" | "right" | "left"
Alignment for the text overlay. One of “left”, “center”, “right”.
mark
Type: string
Watermark image URL.
markAlpha
Type: number
Watermark transparency level (0-100).
rot
Type: number
Rotation angle (degrees).
flip
Type: "h" | "v"
Flip mode. One of “h” for horizontal, “v” for vertical.
gaussblur
Type: number
Gaussian blur radius to apply.
noise
Type: number
Noise reduction amount to apply.
strip
Type: boolean
Strip image metadata (EXIF, etc.)
width
Type: string | number
height
Type: string | number
format
Type: "jpeg" | "jpg" | "png" | "webp" | "avif" | "json" | "gif" | "mp4" | "webm" | "pjpg" | "jp2" | "jxr" | "png8" | "png32" | "blurhash"
quality
Type: string | number
This page is auto-generated from the imgix provider types.
See anything wrong or missing? Suggest a change on GitHub.