Dynamic Images

Turn data into beautiful, shareable images.

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.

<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.

View source on CodePen

Quote cards

Generate shareable quote images from user content.

View source on CodePen

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 are the most efficient approach. Define your HTML once with variables, then generate images by passing just the dynamic data.

Create a template

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></h1><p>By </p></div>"
  }'

Generate images from the template

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:

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.

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

<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;">
    ""
  </blockquote>
  <p style="margin-top: 30px; font-size: 18px; color: #666;">
    — 
  </p>
</div>

Event invitation

<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;"></h1>
  <p style="font-size: 18px; color: #ccc;"> at </p>
  <p style="font-size: 16px; color: #888; margin-top: 30px;"></p>
</div>

Need help?

Talk to a human. Please email us support@htmlcsstoimage.com with any questions and we’ll gladly help you get started.