Introduction

Deliver your first optimized image using the Autorender URL API — no SDK, package, or build step required.

Autorender transforms and delivers images and videos straight from a URL. You put transform tokens in the path; the CDN returns the processed asset, resized and encoded in the best format each browser supports.

This quickstart takes you from a raw upload to a live, optimized delivery URL.

Prerequisites

• An Autorender account — sign up at app.autorender.io
• One image file to upload (JPG or PNG)
• Your workspace ID — get it in step 1 below

1. Get your workspace ID

Your workspace ID prefixes every delivery URL.

1. Sign in to Autorender.

   Open app.autorender.io.

2. Open Settings from the bottom-left sidebar.

   The workspace ID sits at the top of the Settings page.

3. Copy the workspace ID.

   It’s a short alphanumeric string, for example LOKVTtKVGb.

The workspace ID appears in every delivery URL. Keep it handy.

2. Upload a test image

Upload a file in the dashboard and place it at a predictable path, for example products/chair.jpg. You reference that path in the delivery URL.

To upload programmatically instead of through the dashboard, use the Direct upload API.

3. Build a delivery URL

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

https://assets.autorender.io/LOKVTtKVGb/w_800,h_800,c_fill/products/chair.jpg

https://assets.autorender.io/LOKVTtKVGb/w_800,h_800,c_fill/products/chair.jpg

This returns your image resized to 800×800 px and cropped to fill the box (c_fill).

4. Add optimization defaults

Append q_auto,f_auto and Autorender serves the best quality and format for each visitor’s browser: AVIF or WebP where the browser supports it, the source format as the floor.

https://assets.autorender.io/LOKVTtKVGb/w_800,h_800,c_fill,q_auto,f_auto/products/chair.jpg

We recommend q_auto,f_auto on every delivery URL because it cuts file size with no visible quality loss and needs no per-browser configuration.

5. Use it in your code

A delivery URL behaves like any other image URL. Drop it in wherever you reference an asset.

HTML

<img
  src="https://assets.autorender.io/LOKVTtKVGb/w_800,h_800,c_fill,q_auto,f_auto/products/chair.jpg"
  alt="Chair"
/>

curl "https://assets.autorender.io/LOKVTtKVGb/w_800,h_800,c_fill,q_auto,f_auto/products/chair.jpg" -o chair.jpg

const res = await fetch(
  'https://assets.autorender.io/LOKVTtKVGb/w_800,h_800,c_fill,q_auto,f_auto/products/chair.jpg'
);
const blob = await res.blob();

import requests

res = requests.get(
    "https://assets.autorender.io/LOKVTtKVGb/w_800,h_800,c_fill,q_auto,f_auto/products/chair.jpg"
)
with open("chair.jpg", "wb") as f:
    f.write(res.content)

Open the URL in a browser. You should see your image at 800×800 px, served as AVIF or WebP if your browser supports it. That’s it — your first optimized asset is live.

Choose your SDK

The URL API needs no SDK. When you want prebuilt components, uploads, or URL builders, start from your stack.

Front-end — components for responsive images and video, with lazy loading, DPR handling, and upload widgets.

React

Next.js

Vue.js

Angular

Svelte

JavaScript

Backend — server-side SDKs for file uploads, folder management, and URL generation.

Node.js / TypeScript

Python

Java

C# / .NET

Ruby

How Autorender’s two domains work

Autorender serves two domains:

• upload.autorender.io — where you send files via the API (backend uploads, multipart uploads).
• assets.autorender.io — where you request transformed images and videos (the delivery URL you just built).

This quickstart uses only the delivery domain. When you’re ready to upload programmatically instead of through the dashboard, see the Direct upload API.

Next steps

Image transformations

Explore all 50+ transform parameters for images and video.

Direct upload API

Upload assets programmatically instead of through the dashboard.