HTML to Image API: Convert Any HTML to PNG/JPEG

Need to turn HTML into an image? Whether you're generating certificates, invoices, reports, email banners, or dynamic social media graphics, an HTML to image API lets you convert any HTML/CSS into a pixel-perfect PNG or JPEG with a single API call.

Why Convert HTML to Images?

HTML and CSS are the most powerful layout tools available. You already know how to use them. Instead of learning complex image manipulation libraries like ImageMagick or Canvas, why not design in HTML and render to an image?

Common use cases include:

• Certificates & diplomas — Generate personalized certificates for online courses
• Invoices & receipts — Create downloadable invoice images from order data
• Reports & dashboards — Render chart dashboards as shareable images
• Email banners — Generate dynamic promotional banners
• Social media graphics — Create Instagram posts, Twitter cards, and more
• Tickets & passes — Generate event tickets with QR codes

How Rendly's HTML to Image API Works

Send your HTML and CSS to Rendly's API, and get back a rendered image. It's that simple.

Basic Example

curl -X POST https://rendly.io/api/v1/images \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "html": "<div style=\"padding: 60px; background: linear-gradient(135deg, #667eea, #764ba2); color: white; font-family: Arial;\"><h1 style=\"font-size: 48px;\">Hello World</h1><p style=\"font-size: 24px; opacity: 0.8;\">Generated with Rendly</p></div>",
    "width": 1200,
    "height": 630,
    "format": "png"
  }' \
  --output image.png

With Separate CSS

curl -X POST https://rendly.io/api/v1/images \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "html": "<div class=\"certificate\"><h1>Certificate of Completion</h1><p class=\"name\">John Doe</p><p class=\"course\">Advanced JavaScript</p><p class=\"date\">February 2026</p></div>",
    "css": ".certificate { width: 1200px; height: 630px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: white; border: 8px solid #1a1a2e; text-align: center; font-family: Georgia, serif; } h1 { font-size: 42px; color: #1a1a2e; margin-bottom: 40px; } .name { font-size: 56px; font-weight: bold; color: #6C5CE7; margin-bottom: 16px; } .course { font-size: 24px; color: #666; margin-bottom: 32px; } .date { font-size: 18px; color: #999; }",
    "format": "png"
  }' \
  --output certificate.png

Real-World Example: Dynamic Invoice Generator

Here's how you might generate invoice images from your application:

import requests
import json

def generate_invoice_image(invoice_data):
    html = f"""
    <div class="invoice">
      <div class="header">
        <h1>INVOICE</h1>
        <div class="invoice-number">#{invoice_data['number']}</div>
      </div>
      <div class="details">
        <p><strong>Bill to:</strong> {invoice_data['customer']}</p>
        <p><strong>Date:</strong> {invoice_data['date']}</p>
      </div>
      <div class="total">
        <span>Total:</span>
        <span class="amount">${invoice_data['total']}</span>
      </div>
    </div>
    """

    response = requests.post(
        "https://rendly.io/api/v1/images",
        headers={"Authorization": "Bearer YOUR_API_KEY"},
        json={"html": html, "format": "png", "width": 800, "height": 600}
    )
    return response.content

Supported Features

Rendly's rendering engine supports the full modern web stack:

• CSS3 — Flexbox, Grid, gradients, shadows, animations (captured at frame 0)
• Web fonts — Google Fonts and custom font loading
• Images — External images via URL, inline SVGs, data URIs
• Retina rendering — Set device_scale_factor: 2 for crisp 2x images
• Multiple formats — PNG (with transparency), JPEG, and WebP

HTML to Image vs. Canvas Libraries

Why choose an API over libraries like html2canvas or node-canvas?

Feature	Rendly API	html2canvas	node-canvas
Full CSS support	✅ Yes	⚠️ Partial	❌ No CSS
Server-side	✅ Yes	❌ Client only	✅ Yes
Web fonts	✅ Yes	⚠️ Limited	⚠️ Manual
No dependencies	✅ HTTP only	❌ npm package	❌ Native deps
Consistent output	✅ Chromium	⚠️ Varies	✅ Cairo

Performance Tips

• Use system fonts when possible — they load instantly
• Inline small images as data URIs to avoid extra network requests
• Set explicit dimensions on the body to avoid layout calculation overhead
• Use JPEG for photographic content (smaller file size)
• Use PNG when you need transparency

Get Started

Converting HTML to images with Rendly takes just one API call. Sign up for free (100 renders/month) and try it in the interactive playground where you can preview your HTML rendering in real-time.

Check out the API documentation for the full list of parameters and advanced options.