Documentation

Image optimization

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

Try StackShiftRead the overview

Search Docs

Assets

Image optimization

Live

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

Goal

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

Current status

Live

This area is documented as current, user-reliable behavior.

Workflow

  1. 1Create reusable presets for common shapes such as avatars, thumbnails, and product cards.
  2. 2Use /t/{preset}/assets/{assetId}/{filename} for named transforms.
  3. 3Use signed dynamic URLs when the dimensions must be chosen at request time.
  4. 4Let StackShift store derived outputs by asset ID, source checksum, and transform hash.

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

Example

ts
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

Example

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

Expected result

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