ReferenceFind the facts

Standard transformation URL reference

This page specifies the URL-encoding scheme for standard transformations and adjustments.

URL structure

Standard transformations are encoded into the asset URL:

{baseUrl}/transform/image/{segment}/{segment}/...

Each transformation produces one segment in the format {id}:{parameters}. Segments are joined with /. Transformations set to their default value are omitted from the URL.

Transformations

Resize

Field Type Options/Range Default

Size

Text

Width x Height (for example, 800x600)

—

Resize type

Select

fit-in, stretch

—

Upscale

Checkbox

upscale

—

Padding top

Number

min: 0

—

Padding right

Number

min: 0

—

Padding bottom

Number

min: 0

—

Padding left

Number

min: 0

—

URL format: resize:{resize-type}:{upscale}:{width}x{height}

With optional padding: /padding:{left}x{top}:{right}x{bottom}

Example: resize:fit-in:upscale:800x600/padding:10x5:15x20

Crop

Field Type Range Default

Top

Number

min: 0

—

Right

Number

min: 0

—

Bottom

Number

min: 0

—

Left

Number

min: 0

—

The crop fields are disabled until the crop tool is activated.

URL format: crop:{left}x{top}:{right}x{bottom}

Example: crop:50x100:400x300

Rotate

Field Type Range Default

Rotate

Slider

0–270, step: 90

0

URL format: rotate:{angle}

Example: rotate:90

Proportion

Field Type Range Default

Proportion

Slider

5–100

100

URL format: proportion:{percentage}

Example: proportion:50

Quality

Sets the output image quality for JPEG.

Field Type Range Default

Quality

Slider

40–100, step: 1

100

URL format: quality:{value}

Example: quality:85

Fill

Sets a solid background fill colour.

Field Type Default

Colour

Colour picker

—

URL format: fill:{colour}

Example: fill:FF0000

Adjustments

Each adjustment uses a slider control and is omitted from the URL when set to its default value of 0.

Adjustment Range Step Default URL format

Brightness

-100 to 100

1

0

brightness:{value}

Contrast

-100 to 100

1

0

contrast:{value}

Saturation

-100 to 100

1

0

saturation:{value}

Hue

-100 to 100

1

0

hue:{value}

Sharpen

0 to 1

0.1

0

sharpen:{value}

Blur

0 to 100

—

0

blur:{value}

RGB

RGB adjustment uses three separate channel sliders.

Channel Range Step Default

Red

-100 to 100

1

0

Green

-100 to 100

1

0

Blue

-100 to 100

1

0

URL format: rgb:{red},{green},{blue}

Example: rgb:10,-5,15

Output formats

Selects the output image format. When set to "Auto", no format segment is added to the URL.

Format Value

JPEG

jpeg

PNG

png

GIF

gif

WebP

webp

TIFF

tiff

AVIF

avif

JP2

jp2

URL format: format:{value}

Example: format:webp

Complete example

An asset with resize, crop, quality, format, and a brightness adjustment applied:

https://cdn.assets.storyteq.com/ca/version/33a1ee22-7a6f-4630-b39c-28da567f45d6/transform/image/resize:fit-in:800x600/crop:50x100:400x300/quality:85/format:webp/brightness:15

Related pages