wsrv.nl
Unpic can transform images with wsrv.nl using the wsrv 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 wsrv provider from the unpic package using a subpath import:
import { transform } from 'unpic/providers/wsrv';If using an Unpic component, you can optionally pass custom operations and options to the
component using an object with a wsrv key. This is lets you use extra features supported
by wsrv.nl, 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={{
"wsrv": {
// wsrv options here
}
}}
operations={{
"wsrv": {
// wsrv 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/wsrv';
---
<Image
src="image.jpg"
width={800}
height={600}
transformer={transformer}
/>
Types
The wsrv provider supports the following arguments:
Options
The wsrv provider does not support any extra configuration options.
Operations
w
Type: number
Sets the width of the image in pixels. Alias for width.
h
Type: number
Sets the height of the image in pixels. Alias for height.
output
Type: WsrvFormats
Output format. Alias for format.
q
Type: number
Quality level (0-100). Alias for quality.
dpr
Type: number
Sets the output density of the image (1-8).
fit
Type: "contain" | "cover" | "fill" | "inside" | "outside"
Sets how the image is fitted to its target dimensions.
inside: (default) Resize to be as large as possible while ensuring dimensions are <= specifiedoutside: Resize to be as small as possible while ensuring dimensions are >= specifiedcover: Crop to cover both provided dimensionsfill: Ignore aspect ratio and stretch to both dimensionscontain: Embed within both dimensions (use with cbg for background)
we
Type: boolean
Do not enlarge if width or height are already less than specified dimensions.
a
Type: "center" | "top-left" | "top" | "top-right" | "left" | "right" | "bottom-left" | "bottom" | "bottom-right" | "entropy" | "attention"
Alignment position for the image.
crop
Type: string
Crops the image to specific dimensions before any other operations.
trim
Type: number
Trim ‘boring’ pixels from all edges.
mask
Type: string
Sets the mask type from a predefined list (circle, ellipse, triangle, etc.).
mbg
Type: string
Mask background color.
flip
Type: boolean
Mirrors the image vertically.
flop
Type: boolean
Mirrors the image horizontally.
ro
Type: number
Rotates the image by specified degrees.
bg
Type: string
Background color for transparent images.
blur
Type: number
Blur radius (0.3-1000).
con
Type: number
Contrast adjustment (-100 to 100).
filt
Type: "sepia" | "negate" | "greyscale" | "duotone"
Filter to apply (greyscale, sepia, negate, etc.).
sat
Type: number
Saturation adjustment (-100 to 100).
hue
Type: number
Hue rotation (0-360).
sharp
Type: number
Sharpening amount.
tint
Type: string
Tint the image.
cbg
Type: string
Contain background color (use with fit=contain).
l
Type: number
PNG compression level (0-9, default 6).
ll
Type: boolean
WebP lossless compression.
il
Type: boolean
Add interlacing/progressive scan.
n
Type: number
Number of pages to render (-1 for all, useful for animated images).
width
Type: string | number
height
Type: string | number
format
Type: "jpeg" | "jpg" | "png" | "webp" | "avif" | "gif" | (string & {}) | "json" | "tiff"
quality
Type: string | number
This page is auto-generated from the wsrv provider types.
See anything wrong or missing? Suggest a change on GitHub.