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

# Automatic

> Autorender picks the format, width, and parameter order for each request so you deliver optimized images with no per-device configuration.

Autorender applies several optimizations to every delivery URL without extra configuration: it picks the best image format, chooses a device-appropriate width, buckets widths for cache efficiency, and reorders transform parameters into a canonical sequence.

## Automatic format selection

Add `f_auto` to a delivery URL and Autorender serves the best format each browser supports: AVIF where the browser accepts it, WebP as the fallback, and the source format (such as JPEG) as the floor.

```bash theme={null}
https://assets.autorender.io/LOKVTtKVGb/f_auto/docs/example/porsche.jpg
```

We recommend `f_auto` on every delivery URL because it cuts file size with no visible quality loss and needs no per-browser handling on your side. Pair it with `q_auto` to let Autorender choose the quality as well.

## Automatic width bucketing

Autorender rounds width values up to a fixed set of buckets to improve cache hit rates and reduce stored variants. When you request a width, it snaps up to the nearest bucket.

Autorender uses six width buckets:

* **320 px** — ultra-small mobile devices
* **480 px** — small mobile devices
* **720 px** — standard mobile devices
* **1080 px** — tablets and high-resolution mobile devices
* **1440 px** — desktop displays
* **1920 px** — large desktop displays

Request `w_500` rounds up to `w_720`:

```bash theme={null}
https://assets.autorender.io/LOKVTtKVGb/w_500/docs/example/porsche.jpg
```

Request `w_1500` rounds up to `w_1920`:

```bash theme={null}
https://assets.autorender.io/LOKVTtKVGb/w_1500/docs/example/porsche.jpg
```

Request `w_1080` stays at `w_1080` because it is already a bucket:

```bash theme={null}
https://assets.autorender.io/LOKVTtKVGb/w_1080/docs/example/porsche.jpg
```

<Note>
  Width bucketing applies only when you specify a width explicitly. With preset tokens or aspect ratios, the behavior can differ.
</Note>

## Automatic default width

When a URL sets no width, height, or aspect ratio, Autorender adds a default width based on the requesting device.

Autorender reads the `User-Agent` and `Save-Data` request headers to choose the default:

| Device type                                                   | Default width |
| ------------------------------------------------------------- | ------------- |
| iPhone                                                        | **1080 px**   |
| High-end Android (Samsung, Pixel, OnePlus)                    | **1080 px**   |
| iPad / Android tablets                                        | **1080 px**   |
| Desktop (Mac, Windows, Chrome OS)                             | **1080 px**   |
| Standard Android                                              | **720 px**    |
| Mobile browsers (Opera Mobile, Edge Android, Firefox Android) | **720 px**    |
| Opera Mini / UC Browser / KaiOS                               | **480 px**    |
| Save-Data mode (mobile)                                       | **480 px**    |
| Default fallback                                              | **720 px**    |

The same URL resolves to a different width per device. On an iPhone it becomes `w_1080`; in a mobile browser sending `Save-Data: on` it becomes `w_480`:

```bash theme={null}
https://assets.autorender.io/LOKVTtKVGb/docs/example/porsche.jpg
```

<Warning>
  If you set width, height, or aspect ratio, Autorender does not add a default width. Set dimensions explicitly whenever you need exact control.
</Warning>

## Automatic parameter ordering

Autorender reorders transform parameters into a fixed sequence so the same set of parameters produces the same output — and the same cached URL — no matter the order you write them.

Transform parameters apply in this order:

1. **Crop mode** (`c_*`)
2. **Aspect ratio** (`ar_*`)
3. **Width** (`w_*`)
4. **Height** (`h_*`)
5. **Position** (`p_*`)
6. **Zoom** (`z_*`)
7. **Flip** (`flip_*`)
8. **Rotation** (`r_*`)
9. **Border radius** (`br_*`)
10. **Background** (`bg_*`)
11. **Format** (`f_*`)
12. **Quality** (`q_*`)

Effects apply in this order:

1. **Auto improve** (`e_improve`)
2. **Unsharp mask** (`e_unsharp_mask`)
3. **Saturation** (`e_saturation`)
4. **Contrast** (`e_contrast`)
5. **Brightness** (`e_brightness`)
6. **Gamma** (`e_gamma`)
7. **Sharpen** (`e_sharpen`)
8. **Grayscale** (`e_grayscale`)
9. **Black & white** (`e_blackwhite`)

These two URLs produce identical results because Autorender reorders both to `c_crop,w_720,q_80`:

```bash theme={null}
https://assets.autorender.io/LOKVTtKVGb/q_80,w_720,c_crop/docs/example/porsche.jpg
https://assets.autorender.io/LOKVTtKVGb/c_crop,q_80,w_720/docs/example/porsche.jpg
```

<Note>
  Autorender always applies transforms in the canonical order, so you do not need to order parameters yourself.
</Note>

## Preset tokens

Preset tokens (`t_*`) store a reusable transform string that Autorender expands at request time. Presets are stored per workspace and referenced by name.

The preset `t_thumbnail-2` expands to `c_fill,w_200,h_200,p_c`, so these two URLs are equivalent:

```bash theme={null}
https://assets.autorender.io/LOKVTtKVGb/t_thumbnail-2/docs/example/porsche.jpg
https://assets.autorender.io/LOKVTtKVGb/c_fill,w_200,h_200,p_c/docs/example/porsche.jpg
```

You can add more parameters alongside a preset:

```bash theme={null}
https://assets.autorender.io/LOKVTtKVGb/t_thumbnail-2,q_90/docs/example/porsche.jpg
```

## URL canonicalization

Autorender canonicalizes every transform URL so identical transforms cache under identical URLs. Canonicalization:

* Removes duplicate parameters and normalizes values.
* Encodes special characters in paths and values.
* Applies the parameter-ordering rules above.
* Standardizes parameter formatting.

The result is a higher cache hit rate and the same output for the same transform every time.

## Automatic Save-Data support

Autorender honors the `Save-Data` request header, which signals that the user prefers reduced data usage. When it is present on a mobile request, Autorender caps the default width at **480 px** instead of the device-specific default, lowering bandwidth for that visitor.

## When to rely on the defaults

* **Responsive images** — let Autorender pick a device-appropriate width.
* **Prototypes** — use default widths during development.
* **Complex transforms** — rely on automatic ordering rather than sequencing parameters yourself.

## When to set values explicitly

* **Exact dimensions** — when a layout needs precise pixel sizes.
* **Cache control** — when you want to pin the exact variants you cache.
* **Design systems** — when specific sizes are part of your brand.

<Tip>Request widths that match a bucket (`w_320`, `w_480`, `w_720`, `w_1080`, `w_1440`, `w_1920`) so no rounding happens and cache keys stay predictable.</Tip>

## Next steps

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

  <Card title="Image transformations" icon="image" iconType="solid" href="/docs/transformations/introduction">
    See every transform parameter for images and video.
  </Card>

  <Card title="Effects" icon="wand-magic-sparkles" iconType="solid" href="/docs/transformations/effects/introduction">
    Adjust color, tone, and sharpness with `e_` tokens.
  </Card>

  <Card title="Recipes" icon="book" iconType="solid" href="/docs/transformations/recipes">
    Copy-paste transform combinations for common tasks.
  </Card>
</CardGroup>