Images & Assets

Required dimensions

<Image> requires width and height (PDF points). The engine uses them to:

1. Reserve layout space (images are atomic)
2. Downsample with Sharp for smaller PDF payloads

<Image src="https://example.com/logo.png" width={100} height={50} />

Sources

src accepts:

• Absolute filesystem paths
• Remote URLs (http / https)
• Relative paths (resolved by the asset resolver)

Before pagination, PdfEngine resolves non-data: sources to base64 data URIs.

Retina / DPI

Set devicePixelRatio on the engine (default 2) so rasterization is sharper:

const engine = new PdfEngine({
  fonts: [{ name: 'Inter', data: fontBuffer, weight: 400 }],
  devicePixelRatio: 2,
});

Higher values increase PNG size. Prefer 1–2 for most documents; avoid extreme values.

Tips

• Prefer SVG or high-quality PNG sources when Sharp scaling is enabled.
• Match width/height to the intended on-page size, not the source pixel size.
• Oversized images that exceed remaining page height move entirely to the next page (atomic).

See also

• Layout Engine — Image
• Core Options