Skip to main content

Rendering Images

The same JSON that renders videos renders still images: set type: "image" on the payload and Zvid returns a PNG, JPG, or WebP instead of a video. Everything about composition — text, HTML with customCode, images, shapes, positioning, filters — works exactly like video.

curl -X POST https://api.zvid.io/api/render/image/api-key \
  -H "x-api-key: YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{ "payload": { "type": "image", "width": 1200, "height": 675, "outputFormat": "png", "visuals": [ ... ] } }'

You can submit an image payload to the regular /api/render/api-key endpoint too — the /api/render/image/* endpoints simply force type: "image" and reject non-image payloads, which makes intent explicit in integrations.

Image-Specific Fields​

FieldTypeDefaultNotes
type"image""video"Switches the render to image output.
outputFormatpng | jpg | jpeg | webppngVideo formats are rejected for image renders.
transparentbooleanfalseTransparent background. PNG/WebP only — rejected with jpg.
quality1–100encoder defaultJPG/WebP compression quality — rejected with png.
snapshotTimenumber (seconds, 0–3600)startWhich moment of animated content (e.g. a customCode animation) to capture.

Not applicable to image renders (rejected by validation): duration, frameRate, audios, scenes, subtitle, and thumbnail (the image is its own thumbnail).

Examples​

A social graphic​

{
  "name": "docs-img-render-basic",
  "type": "image",
  "width": 1200,
  "height": 675,
  "outputFormat": "png",
  "backgroundColor": "#140b2e",
  "visuals": [
    {
      "type": "IMAGE",
      "src": "https://cdn.pixabay.com/photo/2024/10/02/18/24/leaf-9091894_1280.jpg",
      "width": 1200,
      "height": 675,
      "position": "center-center",
      "resize": "cover",
      "filter": {
        "brightness": -20
      }
    },
    {
      "type": "TEXT",
      "html": "<div class=\"q\">“Ship visuals from an API.”</div>",
      "position": "center-center",
      "customCode": {
        "css": ".q { color: #ffffff; font-family: Montserrat; font-size: 64px; font-weight: 800; text-shadow: 0 4px 24px rgba(0,0,0,0.6); }"
      }
    }
  ]
}
Rendered by Zvid
1200×675 PNG rendered by Zvid
1200×675 PNG rendered by Zvid

Transparent sticker (PNG with alpha)​

{
  "name": "docs-img-render-transparent",
  "type": "image",
  "width": 800,
  "height": 600,
  "outputFormat": "png",
  "transparent": true,
  "visuals": [
    {
      "type": "TEXT",
      "html": "<div class=\"sticker\">NEW DROP</div>",
      "position": "center-center",
      "customCode": {
        "css": ".sticker { color: #ffffff; font-family: Poppins; font-size: 72px; font-weight: 800; padding: 28px 56px; background: linear-gradient(135deg, #7c3aed, #d946ef); border-radius: 999px; transform: rotate(-6deg); box-shadow: 0 12px 40px rgba(124,58,237,0.5); }"
      }
    }
  ]
}
Rendered by Zvid
transparent: true — drop it on any background
transparent: true — drop it on any background
This site's social card is a Zvid render

The Open Graph image for docs.zvid.io is generated by this exact feature — a 1200×630 type: "image" render.

Credits​

Image renders cost 1 credit per 10 images (rounded up, minimum 1) — resolution-independent. A single image render costs 1 credit; a bulk render of 25 images costs 3 credits.

Response​

The submit/poll flow is identical to video — see the Quick Start. The completed job's result.url points at the image file; there is no separate thumbnail.

In the Editor​

The editor has a first-class image mode: New → Image hides the time-domain tools (timeline, audio, scenes, subtitles) and the render dialog offers format, quality, and transparency options. See Rendering & export.