Introduction

Transform images and videos in real time from the delivery URL — resize, crop, rotate, optimize, and overlay, with no stored variants.

Autorender applies transformations in real time from the delivery URL. You add transform tokens to the path; the CDN returns the processed image or video, and every result is cached at the edge.

You can use URL transformations to:

• Resize, crop, rotate, flip, and zoom images to fit any layout
• Round corners for avatars, cards, and UI elements
• Add text and image overlays for watermarks, banners, and social cards
• Convert format and tune quality per browser with f_auto and q_auto
• Store common combinations as reusable recipe tokens

Transformations run on the delivery domain assets.autorender.io. There is nothing to precompute — every variant is generated on first request, so you never store multiple copies of the same asset.

How does it work?

You apply transformations by inserting a comma-separated token string into the URL path. When a request arrives, Autorender processes the source asset and returns the transformed result.

The first request to a transformed URL triggers processing, and the result is cached at the CDN edge. Every later request for the same URL is served straight from cache — the transformation does not run again, so there is no per-request processing cost for repeat loads.

Every delivery URL follows the same anatomy: domain, workspace ID, transforms, then the file path.

https://assets.autorender.io/LOKVTtKVGb/w_300,h_300/products/chair.jpg

Here LOKVTtKVGb is your workspace ID and w_300,h_300 resizes the image to 300×300 px (w_300,h_300). Everything after the transform segment is the source path.

How to use transformations?

Append the transform tokens between the workspace ID and the file path. The example below takes an untransformed asset and resizes it to 360×360 px (w_360,h_360).

Original image

https://assets.autorender.io/LOKVTtKVGb/doc1/earring.jpg

Resized to 360×360 px

https://assets.autorender.io/LOKVTtKVGb/w_360,h_360/doc1/earring.jpg

Tokens combine in one segment. This example focuses the crop on a detected face (fo_face), sizes it to 300×300 px, and rounds it into a circular avatar with a 150 px radius (br_150).

Face crop (fo_face,w_300)

https://assets.autorender.io/LOKVTtKVGb/fo_face,w_300/doc1/face-crop.jpg

Circular avatar (br_150)

https://assets.autorender.io/LOKVTtKVGb/fo_face,w_300,h_300,br_150/doc1/face-crop.jpg

Transformation summary

Category	Parameter	Example	Description
Dimensions	w_{n}	w_500	Width in pixels
	h_{n}	h_500	Height in pixels
	ar_{ratio}	ar_1:1	Aspect ratio
Crop modes	c_fill	c_fill	Fills the target box, crops the excess
	c_fit	c_fit	Fits within the box, no crop
Positioning	p_{gravity}	p_c	Positional gravity (c, t, b, tl, tr, bl, br)
Focus	fo_{mode}	fo_face	Focus crop on a face, smart content, or any object
	ps_{x,y}	ps_10,20	Specific X,Y coordinate positioning
Effects	e_{effect}	e_grayscale	Apply a filter (grayscale, blur, and more)
Format	f_{type}	f_webp	Output format (webp, auto, jpg, png)
Quality	q_{n}	q_auto	Output quality (auto, or 1–100)
Flip	flip_h / flip_v / flip_hv	flip_h	Horizontal, vertical, or both
Rotation	r_{deg}	r_90	Rotate 90, 180, or 270 degrees

Next steps

Resize and aspect ratio

Set width, height, and aspect ratio with w_, h_, and ar_.

Crop

Control crop modes, positions, and face or object detection.

Effects

Apply grayscale, sharpen, brightness, and other filters.

Recipes

Store common transform combinations as reusable t_ tokens.