Image Elements

Adding an Image Element

Image elements let you add visual content to your PDF templates — logos, product photos, signatures, icons, and more.

1. Click Image in the toolbar (or press I)
2. Click on the canvas to place the element
3. Upload an image or enter a URL in the inspector panel

Image Sources

Upload an Image

Click Upload in the inspector to select an image from your computer. Supported formats:

• PNG — Best for logos, icons, and graphics with transparency
• JPEG — Best for photographs and complex images
• SVG — Vector graphics that scale without quality loss
• WebP — Modern format with good compression

Image URL

Instead of uploading, paste an image URL directly. The image must be publicly accessible at generation time. This is useful for:

• Images hosted on your own CDN
• Stock photos from services like Unsplash
• Dynamically generated QR codes or barcodes

Dynamic Images

To display different images per document (e.g., user avatars, product photos), use a field key as the image source. Pass the URL in your API data:

{
  "templateId": "tmpl_abc",
  "data": {
    "company_logo": "https://example.com/logos/acme.png",
    "employee_photo": "https://example.com/photos/jane.jpg"
  }
}

Sizing & Aspect Ratio

Control how images fit within their bounding box:

• Contain — The image scales to fit within the box, preserving aspect ratio. May leave empty space.
• Cover — The image fills the entire box, cropping edges if needed. No empty space.
• Stretch — The image stretches to fill the box exactly. May distort the image.

You can also set exact width and height values in the inspector to control the element size precisely.

Positioning

Drag the image element to position it on the canvas, or set exact X/Y coordinates in the inspector panel. Use snap guides to align images with other elements.

Styling Images

Image elements support the same styling options as other elements:

• Border — Add a border around the image
• Border radius — Round the corners (set to 50% for a circle)
• Shadow — Add a drop shadow for depth
• Opacity — Make the image semi-transparent
• Rotation — Rotate the image by a set number of degrees

Image Quality Tips

• Use high-resolution images — PDFs are often printed. Aim for at least 150 DPI for printed documents, 300 DPI for professional quality.
• Use PNG for logos — PNG supports transparency and sharp edges, ideal for logos and icons.
• Use JPEG for photos — JPEG provides better compression for photographs without noticeable quality loss.
• Keep files under 2MB — Large images increase PDF generation time and file size.
• Use SVG when possible — Vector graphics scale perfectly at any size with tiny file sizes.

Next Steps

• Dynamic Images — Load images from your API data
• Image Optimization — Optimize images for PDF quality and size
• Styling & Formatting — Style any element type