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

# Blur images and create a 1200×630 social preview

> Build an exact-size JPEG social card with ordered crop and blur operations, then choose durable public delivery or private access.

## Goal

Render a 1200×630 JPEG and deliver it with an access policy appropriate for social crawlers.

## Prerequisites

* A clean, ready image in your Assets space
* The shared server request/render helper in the video recipes guide
* An account with the required processing allowance and advanced-transform entitlement

## Workflow

<Steps>
  <Step>
    Choose the source image and focal point.
  </Step>

  <Step>
    Render the crop and blur recipe.
  </Step>

  <Step>
    Download the returned derivative and verify framing.
  </Step>

  <Step>
    Use durable public delivery for a public social preview; keep private media private.
  </Step>
</Steps>

## Create the social-card image

Use the request and render helpers in [the media recipe guide](/assets/trim-videos-and-create-posters). Set IMAGE\_ASSET\_ID to your source image. The fill crop produces exactly 1200×630; fit preserves the whole image and may not fill those dimensions. The API spells center gravity as centre.

Crop first and blur afterward to make sigma apply at the output resolution. Remove the blur operation for a sharp social card. Blur applies to the whole image; this recipe does not perform selective face redaction.

```js theme={null}
const imageId = process.env.IMAGE_ASSET_ID;
const preview = await render(imageId, {
  version: 2,
  media_kind: 'image',
  operations: [
    { type: 'crop', mode: 'fill', width: 1200, height: 630, gravity: 'centre' },
    { type: 'blur', sigma: 4 },
  ],
  output: { kind: 'image', format: 'jpeg', quality: 85 },
});
// preview.id identifies this finished derivative.
```

## Keep the subject in frame

Use gravity north/east/south/west or a supported corner, or provide focal\_x and focal\_y together for a fill crop. Focal coordinates range from 0 to 1. For example, focal\_x: 0.7 and focal\_y: 0.4 bias the crop toward a subject right of center. Inspect a real result rather than assuming every image has a centered subject.

Blur sigma must be greater than zero and at most 100. Output quality is 1–100. Output dimensions are bounded at 4096×4096. These bounds do not override plan allowances.

## Download, then publish intentionally

Use GET /assets/\{imageId}/derivatives/\{preview\.id}?download=true with your server credentials to download the JPEG. The signed derivative route in the video recipe guide also works for a ready image derivative, but expires after 15 minutes.

For og:image, use a stable public image URL that a social crawler can fetch without authentication. One explicit approach is to download the finished JPEG on your backend and upload it as a new asset into a bucket configured for public delivery, then wait for readiness and use the returned public URL. Do not use the Studio save route for an image-source recipe: the current save implementation accepts video-source Studio outputs.

If you already use Assets publications, publish the approved rendition through that workflow. Do not change a private original to public just to obtain a social preview. Store asset IDs, not signed URLs, for future regeneration.

## Connect it to your page

Set og:image to your ready public image URL, plus og:image:width 1200 and og:image:height 630. Verify the URL returns image/jpeg and file bytes, not a login page. When the preview changes, publish a new version/URL so social caches can fetch it.

## Expected result

<Check>
  Render a 1200×630 JPEG and deliver it with an access policy appropriate for social crawlers.
</Check>

## Common failures

<Warning>
  * A fit crop leaves the wrong framing: use fill for an exact social-card rectangle.
  * A private or expiring URL cannot reliably serve as a long-lived public og:image.
  * Keep operation order consistent: crop-then-blur differs from blur-then-crop.
</Warning>

## Related guides

<CardGroup cols={2}>
  <Card title="Trim videos, create JPG posters and download MP4s" href="/assets/trim-videos-and-create-posters">
    Copyable REST recipes for start/end trimming with audio, timestamp JPEG posters, job polling and signed download URLs for external AI services.
  </Card>

  <Card title="Edit images and build reusable templates" href="/assets/image-studio-and-templates">
    Crop, resize, layer, optimize and batch-process images with Image Studio, Playground and versioned templates.
  </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="Private assets and signed URLs" href="/assets/private-assets-and-signed-urls">
    Keep files private, mint version-bound download tokens, and avoid accidentally caching or logging protected media.
  </Card>

  <Card title="Publications, review and usage rights" href="/assets/publications-review-and-rights">
    Select immutable renditions, capture metadata and rights, submit editorial review, publish by channel, and withdraw delivery.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.