Images in HTML Templates

1. Absolute URLs

If you have an image that is available online, you can create a regular img tag in your HTML template that sets an absolute URL as the src attribute.

<img src="https://www.example.com/images/logo.png" alt="Logo" />

Advantages

• Simplest implementation — no additional coding required
• Minimal request payload size

Disadvantages

• Relies on external resources that may be unavailable
• Unpredictable generation times due to external network requests
• Requires HTML parsing to change images per request

2. Data URIs

Encode images as Base64 strings directly within the src attribute, eliminating external dependencies.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEU..." alt="Logo" />

Advantages

• Images embedded directly in the request — no external dependencies

Disadvantages

• Larger request payloads
• Templates become difficult to edit manually due to lengthy encoded strings
• Still static resources — requires HTML parsing for changes

3. Resource Objects

Images are provided separately in the API request's resources object, while templates reference them by filename only.

<!-- In your HTML template -->
<img src="logo.png" alt="Logo" />

// In your API request
{
    "htmlBase64String": "...",
    "resources": {
        "logo.png": "iVBORw0KGgoAAAANSUhEU..."
    }
}

Advantages

• No external dependencies
• Flexible per-request image substitution
• Templates remain easily editable

Disadvantages

• Larger request payloads
• Manual preview requires copying files to temporary directories (though the PdfBroker Template Tool enables preview functionality)

Special Considerations