> ## Documentation Index
> Fetch the complete documentation index at: https://autorender.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](/docs/transformations/recipes) tokens

<Info>
  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.
</Info>

## 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.

<div className="ar-url-block">
  <span className="ar-domain">[https://assets.autorender.io/](https://assets.autorender.io/)</span>
  <span className="ar-workspace">LOKVTtKVGb</span>
  <span>/</span>
  <span className="ar-transform">w\_300,h\_300</span>
  <span>/</span>
  <span className="ar-path">products/chair.jpg</span>
</div>

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`).

<Tabs>
  <Tab title="Original image">
    ```text theme={null}
    https://assets.autorender.io/LOKVTtKVGb/doc1/earring.jpg
    ```

    <div className="flex object-contain justify-center">
      <img src="https://assets.autorender.io/LOKVTtKVGb/doc1/earring.jpg" alt="Original earring image" className="flex object-contain justify-center" />
    </div>
  </Tab>

  <Tab title="Resized to 360×360 px">
    ```text theme={null}
    https://assets.autorender.io/LOKVTtKVGb/w_360,h_360/doc1/earring.jpg
    ```

    <div className="flex object-contain justify-center">
      <img src="https://assets.autorender.io/LOKVTtKVGb/w_360,h_360/doc1/earring.jpg" alt="Earring resized to 360 by 360 pixels" />
    </div>
  </Tab>
</Tabs>

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`).

<Tabs>
  <Tab title="Face crop (fo_face,w_300)">
    ```text theme={null}
    https://assets.autorender.io/LOKVTtKVGb/fo_face,w_300/doc1/face-crop.jpg
    ```

    <div className="flex object-contain justify-center">
      <img src="https://assets.autorender.io/LOKVTtKVGb/fo_face,w_300/doc1/face-crop.jpg" alt="Image cropped to 300 pixels wide focused on the face" className="flex object-contain justify-center" />
    </div>
  </Tab>

  <Tab title="Circular avatar (br_150)">
    ```text theme={null}
    https://assets.autorender.io/LOKVTtKVGb/fo_face,w_300,h_300,br_150/doc1/face-crop.jpg
    ```

    <div className="flex object-contain justify-center">
      <img src="https://assets.autorender.io/LOKVTtKVGb/fo_face,w_300,h_300,br_150/doc1/face-crop.jpg" alt="Circular avatar with rounded corners" />
    </div>
  </Tab>
</Tabs>

## 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

<CardGroup cols={2}>
  <Card title="Resize and aspect ratio" icon="ruler-combined" iconType="solid" href="/docs/transformations/resize-and-aspect-ratio">
    Set width, height, and aspect ratio with `w_`, `h_`, and `ar_`.
  </Card>

  <Card title="Crop" icon="crop-simple" iconType="solid" href="/docs/transformations/crop">
    Control crop modes, positions, and face or object detection.
  </Card>

  <Card title="Effects" icon="wand-magic-sparkles" iconType="solid" href="/docs/transformations/effects/introduction">
    Apply grayscale, sharpen, brightness, and other filters.
  </Card>

  <Card title="Recipes" icon="bookmark" iconType="solid" href="/docs/transformations/recipes">
    Store common transform combinations as reusable `t_` tokens.
  </Card>
</CardGroup>