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

# Edit images and build reusable templates

> Crop, resize, layer, optimize and batch-process images with Image Studio, Playground and versioned templates.

## Goal

Create a reusable image recipe and save consistent outputs for one asset or a batch.

## Prerequisites

* Sign in to Stackshift and select the Assets space you want to work in.
* Your role must permit the actions you perform in that space.

## Workflow

<Steps>
  <Step>
    Choose a ready source image.
  </Step>

  <Step>
    Add and arrange operations while checking the preview.
  </Step>

  <Step>
    Set the output format and render a saved result.
  </Step>

  <Step>
    Save and publish a template, or apply the recipe to a batch.
  </Step>
</Steps>

## Open a source in Image Studio or Playground

Open Image Studio and choose a source image from the library or samples. Alternatively, open Playground, filter to Image, and choose Try it on Resize & optimize, Crop to fit, Rotate & flip, Round corners, Background color, Blur, Sharpen, Image overlay or Text overlay. The selected tool opens the same editing workflow with a starting operation.

The source preview is for checking composition before saving. If it fails, choose Retry preview and confirm the source is ready and accessible. Changing a source should be a deliberate choice: pixel dimensions, focal points and overlay placement can produce different results on a differently sized image.

## Build an ordered recipe

Use Add operation to add an edit. Operations run in their displayed order. Move up, Move down and Remove change that sequence. For example, crop a wide photo to square before adding a logo if the logo should sit inside the final square; cropping after the overlay can cut the logo off.

Resize sets output dimensions. Crop adds an aspect ratio, dimensions, mode and gravity; use Set focal point when the subject must remain visible. Rotate and flip correct orientation. Round corners changes edge shape. Background fills transparent regions. Blur and sharpen adjust detail. Image overlay selects a second asset; text overlay adds written content with the settings exposed in the operation editor.

Use Undo, Redo and Reset when comparing edits. A recipe is a set of instructions; it does not overwrite the uploaded original merely because you changed a control.

## Choose format, quality and animation handling

Choose an output format suited to your destination and set quality before rendering. PNG is useful when you need transparency; JPEG is appropriate for photographic delivery without alpha; WebP and AVIF can reduce delivery size. Check compatibility with the site or application consuming the result.

Animation handling is explicit: first processes a still frame, reject avoids silently accepting an animated source, and preserve requests preservation where the chosen processing/output combination supports it. A still preview is not a guarantee that an animated final output has preserved every frame. Inspect the saved result.

## Render and inspect the result

Choose Render & save after the preview and settings are correct. Follow the job’s phase and progress. Cancel render is available while the job is still active. When the result appears in Saved outputs, select it and inspect dimensions, edges and overlays before using it in a publication.

If submission fails, retry the same request instead of repeatedly creating equivalent jobs. If you change the recipe, you are requesting a different output. Processing errors, upload errors and preview errors occur at different steps; check the status of the step that actually failed.

## Create a responsive image set

In Responsive optimization, enter the desired widths as a comma-separated list, for example 320, 640, 1280. Choose Render responsive set. The feature produces multiple sizes in AVIF, WebP and JPEG. It uses the first frame for animated images.

After completion, use Copy responsive picture snippet and place the result in the appropriate HTML/template context. Test the page at narrow and wide widths. Private delivery URLs are temporary; a copied snippet is not a permanent authorization mechanism. For ongoing private delivery, resolve fresh URLs on your backend as described in [private assets and signed URLs](/assets/private-assets-and-signed-urls).

## Save, duplicate and publish a template

In Reusable templates, enter a Template name. Select the settings that another use of the template may change, such as crop width or height. Save persists the definition. Load a saved template to restore its recipe. Duplicate creates a separate template for a new use case.

Publish applies to a saved template revision. Save your latest recipe and exposed-input changes before publishing; the publish control is unavailable when the form differs from the saved definition. Deleting a template is different from deleting an original image.

Apply automatically to new uploads configures the template’s eager behavior. Use this only for an output that should consistently accompany new matching uploads. Rendering still produces derived outputs; publication is a separate action.

## Apply a recipe to multiple sources

Choose Add batch source, select an image, and repeat for the other inputs. The picker avoids adding the same asset twice and accepts up to 20 sources in this batch. Choose Apply recipe to batch and review the reported results. Each source contributes its own processing work.

A useful example is a product-card template: square crop, resize to the card dimensions, logo overlay, then your chosen image format. Test on both portrait and landscape source photos before applying the template to the full batch. Batch submission does not eliminate source-specific failures.

## Troubleshoot templates and outputs

If a template does not appear, verify the media type and Assets space. Image templates and video templates are selected in their respective studios. If a save conflicts with a newer revision, reload the template before reapplying your change.

If fields or overlays seem misplaced, check operation order and whether the values refer to source or output dimensions. If a source picker or preview fails, retry that step before starting a render. See [deterministic transforms](/assets/deterministic-media-transforms) for recipe fields and API examples.

## Expected result

<Check>
  Create a reusable image recipe and save consistent outputs for one asset or a batch.
</Check>

## Related guides

<CardGroup cols={2}>
  <Card title="Navigate Assets and use starter samples" href="/assets/workspace-and-samples">
    Find your media, use starter images, videos and models, inspect versions, and choose the right studio.
  </Card>

  <Card title="Deterministic image, video, and audio transforms" href="/assets/deterministic-media-transforms">
    Define ordered v2 transforms for images, video renditions, audio extraction, and timestamp thumbnails; store eager presets or materialize durable derivatives.
  </Card>

  <Card title="Image optimization" href="/assets/image-optimization">
    Use the current transform grammar, named presets, and signed dynamic transforms for predictable image delivery.
  </Card>

  <Card title="Generate and edit images with AI" href="/assets/ai-image-generation-and-editing">
    Generate images, remove or replace backgrounds, isolate subjects, enhance detail and review request history.
  </Card>
</CardGroup>
