---
layout: page
title: Dynamic Images
permalink: /use-cases/dynamic-images/
parent: Use Cases
nav_order: 3
description: >-
  Generate personalized images, certificates, job listings, quotes, and more with HTML/CSS to Image.
---
# Dynamic Images
{: .no_toc }
{: .fs-9 }

Turn data into beautiful, shareable images.
{: .fs-4 .fw-300 }

<hr>

## Overview

Dynamic images are generated programmatically from structured data. Instead of designing each image manually, you create a template and populate it with data - names, dates, stats, quotes, or any other content.

## Common use cases

### Certificates and awards

Generate personalized certificates for course completions, achievements, or recognition.

```html
<div style="width: 800px; height: 600px; background: white; border: 20px solid #1e40af; padding: 60px; text-align: center; font-family: Georgia, serif;">
  <h2 style="color: #1e40af; font-size: 24px; margin: 0;">Certificate of Completion</h2>
  <p style="font-size: 18px; color: #666; margin-top: 40px;">This certifies that</p>
  <h1 style="font-size: 42px; color: #111; margin: 20px 0;">Jane Doe</h1>
  <p style="font-size: 18px; color: #666;">has successfully completed</p>
  <h3 style="font-size: 28px; color: #1e40af; margin: 20px 0;">Introduction to Web Development</h3>
  <p style="font-size: 16px; color: #666; margin-top: 60px;">December 30, 2025</p>
</div>
```

### Job listings

Turn job data into shareable images for social media and job boards.

{% cloudinary /assets/images/jobad.jpeg alt="Autogenerated image for a job advertisement" %}

[View source on CodePen](https://codepen.io/mscccc/pen/xyXKrj)

### Quote cards

Generate shareable quote images from user content.

{% cloudinary /assets/images/textshot2.png alt="User comment auto generated text shot" %}

[View source on CodePen](https://codepen.io/mscccc/pen/yRzBWP)

### Personalized invitations

Create custom event invitations with recipient names, dates, and event details.

### Stats and leaderboards

Turn metrics and rankings into visual graphics for sharing.

### E-commerce

Generate product cards, sale announcements, or promotional graphics from product data.

## Using templates

For dynamic images, [Templates](/getting-started/templates/) are the most efficient approach. Define the design once with variables, then generate images by passing just the dynamic data.

You can write the HTML/CSS yourself or build the design visually with the [Template Editor](/template-editor/). If your template uses editor variables, the [Variables guide](/template-editor/variables/) explains preview data, fallback behavior, and `template_values`.

### Create a template

```bash
curl -X POST https://hcti.io/v1/template -u 'UserID:APIKey' \
  -H "Content-Type: application/json" \
  -d '{
    "html": "<div style=\"padding:40px;background:#4f46e5;color:white;font-family:sans-serif;\"><h1>{{title}}</h1><p>By {{author}}</p></div>"
  }'
```

### Generate images from the template

```bash
curl -X POST https://hcti.io/v1/image -u 'UserID:APIKey' \
  -H "Content-Type: application/json" \
  -d '{
    "template_id": "t-abc123",
    "template_values": {
      "title": "My Amazing Article",
      "author": "Jane Doe"
    }
  }'
```

## Batch generation

Need to create many images at once? Use the batch endpoint to generate up to 25 images in a single request:

```bash
curl -X POST https://hcti.io/v1/image/batch -u 'UserID:APIKey' \
  -H "Content-Type: application/json" \
  -d '{
    "template_id": "t-abc123",
    "variations": [
      { "template_values": { "title": "Article 1", "author": "Jane" } },
      { "template_values": { "title": "Article 2", "author": "John" } },
      { "template_values": { "title": "Article 3", "author": "Alex" } }
    ]
  }'
```

## Design tips

1. **Use web-safe fonts or Google Fonts** - Ensure your fonts render correctly. [Learn about Google Fonts](/parameters/google_fonts/).

2. **Design at 2x resolution** - Images are rendered at `device_scale: 2` by default for crisp display.

3. **Test with real data** - Use actual content lengths to ensure your layout handles edge cases.

4. **Keep file sizes reasonable** - Very large images take longer to generate and load.

5. **Use CSS flexbox/grid** - Modern CSS layouts work great for dynamic content that varies in length.

## Examples

### Simple quote card

```html
<div style="width: 600px; padding: 60px; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); font-family: Georgia, serif;">
  <blockquote style="font-size: 28px; line-height: 1.6; color: #333; margin: 0;">
    "{{quote}}"
  </blockquote>
  <p style="margin-top: 30px; font-size: 18px; color: #666;">
    — {{author}}
  </p>
</div>
```

### Event invitation

```html
<div style="width: 500px; padding: 50px; background: #1a1a2e; color: white; text-align: center; font-family: sans-serif;">
  <p style="font-size: 14px; letter-spacing: 3px; color: #e94560;">YOU'RE INVITED</p>
  <h1 style="font-size: 36px; margin: 20px 0;">{{event_name}}</h1>
  <p style="font-size: 18px; color: #ccc;">{{date}} at {{time}}</p>
  <p style="font-size: 16px; color: #888; margin-top: 30px;">{{location}}</p>
</div>
```

{% include code_footer.md version=1 %}