# Smart Resize

> Design once, then render the same template at any size — add platform-ready sizes, fine-tune each layout, and reuse them as pages or on-demand API renders.

- **URL**: https://orshot.com/docs/orshot-studio/smart-resize

---

**Smart Resize** lets you take one design and render it at any size — a Story, a Square post, an OG image, a YouTube thumbnail — without rebuilding it for each channel. You add the sizes you need, Orshot adapts the layout to each one, and you reuse them two ways: as new **pages** in your template, or as on-demand **API renders**.

## Open the panel

Click **Smart Resize** in the top toolbar (it carries a **New** badge). The panel opens with two tabs:

- **Variants** — add and fine-tune sizes for this design.
- **API Usage** — how to render any size on demand from the API.

## Add a size

In the **Variants** tab, click **+ Add Size** and pick a preset (Story / Reel, Square Post, …) or enter a custom **width × height**. Each size you add becomes a card with an **instant preview** of your design at that size — on multi-page templates you can swipe through every page right on the card.

The adaptation is **deterministic** — the same design and size always look the same (no randomness):

- Everything scales uniformly, so proportions and text wrapping are preserved.
- Backgrounds and full-bleed images stretch to cover the new canvas.
- Elements re-anchor to the edge or center they were designed against — a top-left logo stays top-left, a footer stays pinned to the bottom.
- Grouped elements (like a heading + subheading) move together as one unit.
- A safety guard ensures the adapted layout never overlaps elements.

Each card shows a status badge — **Auto** (adapted automatically), **AI** (recomposed with AI), or **Edited** (you adjusted it).

## Use a size

Every size card has the actions you need to put that size to work:

| Action | What it does |
| ------ | ------------ |
| **Adjust Variant** | Open this size's layout for editing across all pages (see below). |
| **Add as new page** | Append this size to your template as a brand-new page. |
| **Replace current page** | Swap the current page's canvas to this size in place. |
| **Recompose with AI** | One-click AI re-layout when the automatic fit needs a creative pass. |
| **API Usage** | See the exact API request for this size and test it live. |
| **Remove size** | Drop the size from the list. |

### Fine-tune a size — Adjust Variant

Click **Adjust Variant** to open that size for editing. Your canvas switches to the variant's pages, and you move between them with the **same page arrows** you use normally. Tweak positions, sizing, font sizes — your text, images, colors, and effects stay shared with the base design; only the layout changes here.

When you're done, use **Save Changes** (or **Discard**) in the bottom bar. Saving stores your adjustments with the template, so this size renders **exactly** the way you arranged it — every time, via the API.

## Save your sizes

Click **Save N sizes** to attach the size set to your template (across all pages). Saving matters because:

- A render that requests a **saved** size reproduces your approved preview **exactly** — the automatic adaptation is only used for sizes you haven't saved.
- Saved sizes are available to your whole workflow — your own backend, automations, and [embed](https://orshot.com/docs/orshot-embed/smart-resize) customers.

## Render sizes from the API

The **API Usage** tab shows the request to render any size on demand. In short:

- `response.size` **replaces** the render size (one output at the new size).
- `response.extraSizes` **adds** the same design at extra sizes in one call.```js
response: { type: "url", format: "png", size: "instagram-story" }
```See **[Render from Studio Template → Smart Resize](https://orshot.com/docs/api-reference/render-from-studio-template#smart-resize)** for the full API reference, `extraSizes`, billing, and response shapes.