/
Image Processing Presets

Image Processing Presets

Overview

Image Processing allows Anycast CDN generate, cache, and deliver modified copies of your source images without your origin having to produce and store every variation itself. To get a modified image, the end-user needs to request the image through your CDN domain via the URL and add the preset query with required parameters.

Image Processing is powered by imgproxy processing server, performing the actual image transformations. Presets are a layer on top of imgproxy’s processing options: each preset maps a name you choose to one or more imgproxy processing functions and the parameters those functions require.

Request structure

Basic request format

https://<cdn-domain>/<image-path>?preset=<preset-name>&<preset-parameters>

Request Components

  • Host: Your deployed server, domain, or IP.

  • Source URL: URL of the original image.

  • Processing Options: Preset parameters, passed as query-string key/value pairs separated by ampersands &

Example request URL

https://cdn.example.com/images/product.jpg?preset=resizefill&width=800&height=600

Processing Options Syntax

  • preset=resizefill tells the CDN which preset to apply.

  • width=800 sets the target width to 800.

  • height=600 sets the target height to 600.

What this preset does

This request returns a transformed version of product.jpg image so it completely fills an 800 × 600 area, while leaving the original image unchanged.

If the source image does not match that aspect ratio, the image is scaled and then cropped as needed so the output has the exact requested dimensions.

Available presets

More presets incoming soon!

The following image transformation presets are currently available in the user panel.

Preset

Purpose

Preset definition

Preset

Purpose

Preset definition

crop

Crops an image to a specific size and anchor position.

crop:$arg_width:$arg_height:$arg_gravity

resize

Resizes an image using a selected resize mode.

resize:$arg_type:$arg_width:$arg_height

resizefit

Resizes an image to fit within the requested dimensions.

resize:fit:$arg_width:$arg_height

resizefill

Resizes and crops an image to fill the requested dimensions.

resize:fill:$arg_width:$arg_height

To access image processing configurations, open your resource and navigate to the Locations tab, click Image Processing to enable the parameter; the configuration page will unfold as shown below.

81f472d1-f5d8-4300-aa94-d637888c12ce.png

 

[Screenshot placeholder] Image Processing configuration in the user panel (Locations tab → Image Processing, default presets).

The $arg_ values are placeholders. When making a request, use the parameter name without $arg_ in the URL.

For instance:

  • $arg_width needs to become width=600

  • $arg_height needs to become height=800

  • $arg_gravity needs to become gravity=ce

Assume your source image is photo.jpg located here https://cdn.example.com/images/photo.jpg

Let’s see the application below:

Presets application

crop

Preset definition:

crop:$arg_width:$arg_height:$arg_gravity

Utilization example:

https://cdn.example.com/images/profile.jpg?preset=crop&width=400&height=400&gravity=ce

This preset returns a 400 × 400 crop that is centered on the image.

What each query parameter does

  • preset=crop selects the crop preset.

  • width=400 sets the output image width.

  • height=400 sets the output image height.

  • gravity=ce keeps the center of the image visible when cropping.

Result:

The image is cropped to a 400 × 400 square. The crop is centered on the source image.

crop parameters

  • width - sets output width in pixels.

  • height - sets output height in pixels.

  • gravity - sets the area of the image used as the crop anchor, remaining visible upon cropping.

gravity values

If left undefined, default gravity value defaults to ce.

Value

Position

Value

Position

(empty)

Center

ce

Center

no

Top

so

Bottom

ea

Right

we

Left

noea

Top-right

nowe

Top-left

soea

Bottom-right

sowe

Bottom-left

resize

Preset definition:

resize:$arg_type:$arg_width:$arg_height

Utilization example:

https://cdn.example.com/images/photo.jpg?preset=resize&type=fill&width=1200&height=1000

This request tells the CDN to resize photo.jpg using the mode passed in type — here, fill, so the image completely fills a 1200 × 1000 area.

What each query parameter does:

  • preset=resize selects the preset that lets the user choose the resize mode.

  • type=fill means “fill the target box completely.”

  • width=1200 sets the required output width.

  • height=1000 sets the required output height.

Result:

The final image will always be exactly 1200 × 1000.

If the original image does not have the same aspect ratio as the target box, the image is first scaled proportionally and then cropped as needed so that the output fully covers the target area. This means no empty space remains, but some parts of the original image may be cut off from the edges.

resize parameters

  • type - defines resize mode.

    • fit - preserves the full image while fitting it within the requested width and height without cropping.

    • fill - fills out the set area exactly by resizing and cropping the image to the set width and height.

  • width - sets output width in pixels.

  • height - sets output height in pixels.

resizefit

Preset definition:

resize:fit:$arg_width:$arg_height

Utilization example:

https://cdn.example.com/images/photo.jpg?preset=resizefit&width=800&height=600

This request tells the CDN to resize photo.jpg so it fits within an 800 × 600 area while keeping the original aspect ratio.

What each query parameter does:

  • preset=resizefit selects the shorthand preset that always fits the image inside the target box.

  • width=800 sets the maximum output image width.

  • height=600 sets the maximum output image height.

Result:

The whole image remains visible. No cropping is performed.

If the original image doesn’t match the 800 × 600 frame, the output will be scaled to fit inside that box, so one dimension may end up smaller than the requested size.

Best for: responsive previews, galleries, logos, and any image that must stay fully visible and must not be cropped.

resizefill

Preset definition:

resize:fill:$arg_width:$arg_height

Utilization example:

https://cdn.example.com/images/photo.jpg?preset=resizefill&width=1200&height=1000

This request tells the CDN to resize photo.jpg so it completely fills a 1200 × 1000 area.

What each query parameter does:

  • preset=resizefill selects the shorthand preset that fills the target box completely.

  • width=1200 sets the required output width.

  • height=1000 sets the required output height.

Result:

You get the image with exact defined dimensions.

Best for: Website banners, thumbnails, product-card images, preview images, and fixed-size UI components.

Single-dimension resize

For resize presets, you can provide only width or height, leaving out the other dimension. If one dimension is omitted, the imgproxy calculates it automatically from the source image’s aspect ratio and the dimension you provided.

For example:

https://cdn.example.com/images/photo.jpg?preset=resizefit&height=600

The output is 600 px high; its width is calculated automatically.

https://cdn.example.com/images/photo.jpg?preset=resizefit&width=800

The output will be 800 px wide; its height is calculated automatically by preserving the original aspect ratio.

Same goes for fit and fill modes.