New: Generate PNG and JPEG Images from Your Templates

Templates aren’t just for PDFs. Whether it’s a social media graphic, an Open Graph preview image, or a personalised certificate, there are plenty of situations where you need a data-driven image rather than a document. Starting today, TemplateTo can render your templates as PNG and JPEG images — using the same editor, the same Liquid syntax, and the same API you already know.

Why Image Output?

Think about all the places your brand appears as an image:

• Social media posts — promotional graphics, product announcements, event banners
• Open Graph and Twitter Card images — the preview that appears when someone shares your link
• Email headers — branded banners at the top of marketing emails
• Certificates and badges — course completions, awards, accreditations
• Profile pictures and avatars — personalised circular images for users or teams

Until now, generating these at scale meant either manual design work or stitching together a custom rendering pipeline. With TemplateTo’s image output, you design a template once in the visual editor, feed in your data via the API, and get back a production-ready image. Same templates, same data, same Liquid syntax — just a different output format.

PNG vs JPEG

Both formats are supported, and which you choose depends on your use case:

PNG is best when you need transparency or lossless quality — logos, text overlays, badges, and anything with sharp edges or a transparent background.

JPEG is best when file size matters more than pixel-perfect accuracy — photographs, backgrounds, and images destined for social media where compression is acceptable.

Here are the settings you can control:

Getting Started

Generating a PNG is as simple as changing your render endpoint from /render/pdf/ to /render/image/:

curl -X POST \
  "https://api.templateto.com/render/image/tpl_abc123" \
  -H "X-Api-Key: your-api-key" \
  -H "Content-Type: application/json" \
  -d '{"title": "Monthly Report", "subtitle": "January 2026"}' \
  -o output.png

To generate a JPEG with a custom width and quality setting:

curl -X POST \
  "https://api.templateto.com/render/image/tpl_abc123?format=jpeg&width=1200&quality=85" \
  -H "X-Api-Key: your-api-key" \
  -H "Content-Type: application/json" \
  -d '{"title": "Monthly Report", "subtitle": "January 2026"}' \
  -o output.jpg

That’s it. The same template data you’d send for a PDF works exactly the same way for images.

Clip Regions: Multiple Images from One Template

This is where image rendering gets really powerful. Instead of creating separate templates for every platform and every size, you design one master template and use clip regions to extract multiple images from a single render.

Imagine you’re running a marketing campaign. You need the same graphic in three sizes: Instagram square, Twitter card, and Open Graph. With clips, you make one API call and get all three back:

const response = await fetch(
  'https://api.templateto.com/render/image/tpl_abc123/clips',
  {
    method: 'POST',
    headers: {
      'X-Api-Key': 'your-api-key',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      data: {
        headline: 'Summer Sale — 40% Off Everything',
        productImage: 'https://cdn.example.com/hero.jpg'
      },
      clips: [
        { name: 'instagram', x: 0, y: 0, width: 1080, height: 1080 },
        { name: 'twitter',   x: 0, y: 0, width: 1200, height: 675 },
        { name: 'og',        x: 0, y: 0, width: 1200, height: 630 }
      ]
    })
  }
);

// Response is a ZIP file containing:
//   instagram.png
//   twitter.png
//   og.png
//   manifest.json
const zip = await response.blob();

The response is a ZIP file containing one image per clip, named after the clip (e.g., instagram.png, twitter.png), plus a manifest.json with metadata for each image. Each clip can have its own dimensions, so you get perfectly sized images for every platform without any resizing or cropping artefacts.

For marketing teams generating images at scale, this is a game-changer. One template, one API call, every platform covered.

Circular Masks

Need circular avatars or profile pictures? Add circular=true to your request and TemplateTo will apply a circular mask to the output. The result is automatically returned as PNG to preserve the transparent corners.

curl -X POST \
  "https://api.templateto.com/render/image/tpl_abc123?clipWidth=200&clipHeight=200&circular=true" \
  -H "X-Api-Key: your-api-key" \
  -H "Content-Type: application/json" \
  -d '{"name": "Jane Smith", "avatarUrl": "https://cdn.example.com/jane.jpg"}' \
  -o avatar.png

This is perfect for generating personalised profile pictures, team headshots, or round badge designs from a rectangular template.

Retina and Quality Settings

For high-DPI displays, set scale=2 to render at double the pixel density. The output image will be twice the resolution of the specified width and height, so a 1200px-wide image with scale=2 produces a 2400px-wide file — crisp on retina screens.

curl -X POST \
  "https://api.templateto.com/render/image/tpl_abc123?scale=2&width=1200" \
  -H "X-Api-Key: your-api-key" \
  -H "Content-Type: application/json" \
  -d '{"title": "Retina Banner"}' \
  -o [email protected]

For JPEG output, the quality parameter lets you balance file size against visual fidelity. A quality of 85 is a good starting point for most social media use cases. Drop to 70 if you need smaller files; push to 95 if quality is critical.

Common Social Media Dimensions

Here’s a quick reference for the most common platform sizes:

Use these as clipWidth and clipHeight values in your clip regions, or as width and height query parameters for single-image renders.

Batch Image Generation with Async

If you’re generating images at high volume — hundreds of social media graphics for a product catalogue, or personalised certificates for a large event — combine image rendering with our async rendering API. Start a background job, get notified via webhook when it’s done, and optionally upload the result directly to your own storage.

The async image endpoint follows the same pattern: render/async/image/{templateId}.

This means you can fire off dozens of image generation jobs without waiting for each one to complete, then process the results as they come in via webhooks.

Try It Now

Image rendering is available now on all plans. Design your template in the visual editor, switch your endpoint to /render/image/, and start generating images from your data.

For the full API reference — including all query parameters, response formats, and clip configuration — head over to our image generation documentation.

Got questions or want to see a specific use case? Get in touch via our contact page — we’d love to hear what you’re building with image output.