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

# Image optimization

> Use named presets and signed dynamic transforms for strict, cached, responsive image delivery.

<Tip>
  **Live.** This area is documented as current, user-reliable behavior.
</Tip>

## Goal

Generate optimized image URLs without exposing arbitrary transformation generation to the public internet.

## Prerequisites

* An uploaded image asset
* A named transformation or a server route that can create signed transform URLs

## Workflow

<Steps>
  <Step>
    Create reusable presets for common shapes such as avatars, thumbnails, and product cards.
  </Step>

  <Step>
    Use /t/\{preset}/assets/\{assetId}/\{filename} for named transforms.
  </Step>

  <Step>
    Use signed dynamic URLs when the dimensions must be chosen at request time.
  </Step>

  <Step>
    Let StackShift store derived outputs by asset ID, source checksum, and transform hash.
  </Step>
</Steps>

## Supported transforms

* Resize with width and height.
* Crop modes c\_fit and c\_fill.
* Format output with f\_auto, webp, avif, jpeg, and png.
* Quality output with q\_auto or explicit quality.
* Thumbnail-style presets for square or bounded previews.

## Named preset

```ts theme={null}
await stackshift.assets.transformations.create('avatar', {
  width: 256,
  height: 256,
  crop: 'fill',
  format: 'webp',
  quality: 'auto',
})

const url = stackshift.assets.namedUrl(asset.id, 'avatar')
```

## Signed dynamic transform

```ts theme={null}
const url = await stackshift.assets.signedTransformUrl(asset.id, {
  width: 400,
  height: 400,
  crop: 'fill',
  format: 'auto',
  quality: 'auto',
  expiresIn: '10m',
})
```

## Expected result

<Check>
  Repeated image requests reuse cached derived assets and the CDN receives stable, optimized URLs.
</Check>

## Related guides

<CardGroup cols={2}>
  <Card title="StackShift Assets overview" href="/assets/overview">
    StackShift Assets is now a live media platform: storage, CDN delivery, image optimization, upload sessions, DAM, video, scanning, governance, AI metadata, and version history.
  </Card>

  <Card title="Assets SDK quick start" href="/assets/sdk-quick-start">
    Install a StackShift SDK and upload files from Node/TypeScript, NestJS, Python, or Go.
  </Card>
</CardGroup>