Skip to main content
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.
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:
Request w_1500 rounds up to w_1920:
Request w_1080 stays at w_1080 because it is already a bucket:
Width bucketing applies only when you specify a width explicitly. With preset tokens or aspect ratios, the behavior can differ.

​
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: 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:
If you set width, height, or aspect ratio, Autorender does not add a default width. Set dimensions explicitly whenever you need exact control.

​
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:
Autorender always applies transforms in the canonical order, so you do not need to order parameters yourself.

​
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:
You can add more parameters alongside a preset:

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

​
Next steps

Resize and aspect ratio

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

Image transformations

See every transform parameter for images and video.

Effects

Adjust color, tone, and sharpness with e_ tokens.

Recipes

Copy-paste transform combinations for common tasks.