Output Formats

render() returns encoded image bytes. The format option picks the encoder.

Picking a format

format is a string. The other encoder options are independently optional and ignored when they do not apply: quality affects only jpeg and lossy webp, and lossless affects only webp.

import { render } from "takumi-js";

await render(<OgImage />, { width: 1200, height: 630, format: "png" });
await render(<OgImage />, { width: 1200, height: 630, format: "jpeg", quality: 80 });
await render(<OgImage />, { width: 1200, height: 630, format: "webp", lossless: true });

Format	Alpha	Honors `quality`	Honors `lossless`	Notes
`png` (default)	Yes	No	No	Lossless. Use for transparency or exact pixels.
`jpeg`	No	Yes	No	Lossy. Alpha is flattened. Best for photos.
`webp`	Yes	Yes	Yes	Lossy with `quality`; `lossless: true` wins.
`ico`	Yes	No	No	Favicon container, PNG-encoded inside.
`raw`	Yes	No	No	Uncompressed RGBA bytes, `width × height × 4`.

Per-format specs:

jpeg — quality is 0–100, default 75.
webp — quality is 0–100 for lossy; lossless: true overrides it.

On @takumi-rs/wasm, WebP is always lossless and the lossless knob is absent from the types. quality still exists there and applies to JPEG.

Raw frames

format: "raw" skips encoding and hands back the RGBA buffer directly. Feed it to ffmpeg or any encoder you already run. The keyframe animation page streams raw frames into ffmpeg for video output.

Device pixel ratio

devicePixelRatio scales the output resolution without touching the layout. A 1200 × 630 render at devicePixelRatio: 2 produces a 2400 × 1260 image whose elements keep their CSS sizes.

await render(<OgImage />, { width: 1200, height: 630, devicePixelRatio: 2 });

Dithering

dithering smooths gradients when colors are quantized during encoding, removing visible banding. It applies to static image exports and raw buffers.

none (default)
ordered-bayer
floyd-steinberg

await render(<Gradient />, { width: 1200, height: 630, dithering: "floyd-steinberg" });

Animated output

renderAnimation() encodes a sequence as WebP, APNG, or GIF. See Keyframe Animation.

renderSvg() is the second output backend. It returns an <svg> document string instead of a raster bitmap. The output is real <rect>, <path>, gradients, glyph outlines, and embedded images, drawn from the same layout.

import { render, renderSvg } from "takumi-js";

const png = await render(<OgImage />, { width: 1200, height: 630 });
const svg = await renderSvg(<OgImage />, { width: 1200, height: 630 });

SVG is a vector format, so the raster-only knobs do not apply: format, quality, lossless, dithering, drawDebugBorder, devicePixelRatio.

Cancellation

Every render takes an optional AbortSignal. Pass signal to abort a render that is still fetching fonts or images; an already-aborted signal throws before any work starts.

await render(<OgImage />, { width: 1200, height: 630, signal: request.signal });