HTML to Image API

Convert HTML to Image in One API Call

SnapAPI renders HTML exactly as a browser would — CSS animations, web fonts, SVG graphics, and custom JavaScript all execute before the screenshot is captured. The result is a pixel-perfect PNG or JPEG image at any resolution you specify.

# Convert a URL to image
curl "https://api.snapapi.pics/v1/screenshot?url=https://example.com&format=png&width=1200&height=630&access_key=YOUR_KEY"

# Convert raw HTML to image (POST)
curl -X POST https://api.snapapi.pics/v1/screenshot \
  -H "X-Api-Key: YOUR_KEY" \
  -H "Content-Type: application/json" \
  -d '{"html":"<h1 style='color:white;background:#6366f1;padding:40px'>Hello World</h1>","width":1200,"height":630}'

Use Cases for HTML to Image Conversion

HTML-to-image APIs power a wide range of production use cases that would be difficult or impossible with static image editors.

Open Graph Images

Generate dynamic OG images for every blog post, product, or event page. Pass the page title and description as query parameters to an HTML template, then render a branded 1200x630 PNG on demand.

Email Banners

Transactional emails need responsive images that look right across clients. Render your HTML email header to a PNG using SnapAPI, embed as a standard img tag, and avoid cross-client CSS rendering headaches entirely.

Social Media Cards

Twitter cards, LinkedIn posts, and Instagram stories all have specific image dimension requirements. Design your card in HTML with full CSS control, then render to exact pixel dimensions using the width and height parameters.

Certificate Generation

Online courses and training platforms generate personalized certificates at scale. Pass the recipient name and course title into an HTML template, render to PNG, and send directly in the completion email. No design tool required.

Reporting Dashboards

Convert HTML data tables and Chart.js graphs into images for weekly email reports. The screenshot API waits for JavaScript to finish rendering before capturing, so charts that rely on animation callbacks appear complete in the output.

Product Previews

E-commerce platforms show product customisation previews — engraved text, colour choices, monograms — as images. Render the preview HTML on the server and cache the PNG, eliminating the need for a client-side canvas implementation.

Node.js: Dynamic OG Image Generation

Here is a complete Fastify route that generates Open Graph images dynamically. Call it from your site's head tag as the og:image URL.

const fastify = require('fastify')();
const axios = require('axios');

fastify.get('/og-image', async (req, reply) => {
  const { title = 'My Site', description = '' } = req.query;

  const html = `
    <html>
    <body style="margin:0;background:#0a0c10;font-family:sans-serif;display:flex;align-items:center;justify-content:center;width:1200px;height:630px">
      <div style="padding:60px;max-width:900px">
        <div style="color:#6366f1;font-size:18px;margin-bottom:16px">My Brand</div>
        <h1 style="color:#fff;font-size:52px;line-height:1.2;margin:0 0 20px">${title}</h1>
        <p style="color:#94a3b8;font-size:22px;line-height:1.5">${description}</p>
      </div>
    </body>
    </html>
  `;

  const response = await axios.post(
    'https://api.snapapi.pics/v1/screenshot',
    { html, width: 1200, height: 630, format: 'png' },
    { headers: { 'X-Api-Key': process.env.SNAP_API_KEY } }
  );

  reply.header('Cache-Control', 'public,max-age=86400');
  reply.redirect(response.data.cdn_url);
});

fastify.listen({ port: 3001 });

Image Format and Quality Options

SnapAPI supports PNG for lossless output and JPEG for smaller file sizes. Key parameters for image conversion:

Parameter	Values	Description
format	png, jpeg	Output image format. PNG is default and lossless.
width	100–3840	Viewport width in pixels. Default 1280.
height	100–2160	Viewport height. Use with clip=true to limit output height.
full_page	true, false	Capture the full scrollable page, not just the visible viewport.
retina	true, false	Double pixel density (2x DPR) for high-resolution displays.
delay	0–10000 (ms)	Wait before capture. Useful for CSS animations to finish.

Custom CSS and JavaScript Injection

Before capturing, SnapAPI can inject custom CSS to hide elements or modify the layout, and execute custom JavaScript to interact with the page. This is particularly useful for HTML-to-image workflows where you want to remove navigation bars, cookie banners, or popups from the captured output.

// Remove header and footer before capture
{
  "url": "https://example.com/report",
  "custom_css": "header, footer, .cookie-banner { display: none !important; }",
  "custom_js": "document.querySelectorAll('.ad').forEach(el => el.remove());",
  "full_page": true,
  "width": 1200
}

Frequently Asked Questions

Can I render HTML with web fonts?

Yes. SnapAPI's browser downloads external resources including Google Fonts, custom font files, and icon font sets before capturing. Set a delay parameter if you need to ensure all fonts have loaded before the screenshot is taken.

Is there a size limit on HTML input?

The HTML body parameter supports up to 2MB of HTML content. For larger documents, host the HTML at a URL and pass the URL to the api instead.

How do I handle transparent backgrounds?

Use format=png and set the background CSS property to transparent on the body element. The PNG output will preserve the alpha channel for transparent backgrounds.

What is the maximum output resolution?

Width up to 3840px, height up to 2160px. With retina=true enabled, the effective pixel count doubles to 7680x4320 — useful for print-resolution outputs.

Python: HTML to Image with Requests

Python developers can convert HTML to images with just the requests library. No wkhtmltopdf, no system dependencies, no subprocess calls to external binaries.

import requests
import os

def html_to_image(html_content: str, width: int = 1200, height: int = 630) -> str:
    """Convert HTML string to PNG image. Returns CDN URL."""
    resp = requests.post(
        "https://api.snapapi.pics/v1/screenshot",
        json={
            "html": html_content,
            "width": width,
            "height": height,
            "format": "png",
        },
        headers={"X-Api-Key": os.environ["SNAP_API_KEY"]},
        timeout=30,
    )
    resp.raise_for_status()
    return resp.json()["cdn_url"]

# Generate OG image for a blog post
html = """
<html>
<body style="margin:0;background:#1e1b4b;font-family:sans-serif;display:flex;align-items:center;padding:60px;width:1200px;height:630px">
  <div>
    <p style="color:#818cf8;font-size:18px">My Blog</p>
    <h1 style="color:white;font-size:56px;line-height:1.1">Post Title Here</h1>
  </div>
</body>
</html>
"""
image_url = html_to_image(html)
print(f"OG image: {image_url}")

Caching Strategies for HTML-to-Image Pipelines

Dynamic image generation adds latency to page loads if images are generated on every request. Cache generated images by their content hash: compute a SHA-256 of the HTML template with substituted variables, check your cache, and only call the API on a cache miss.

import hashlib
import redis

r = redis.Redis()

def get_og_image(title: str, description: str) -> str:
    key = hashlib.sha256(f"{title}:{description}".encode()).hexdigest()
    cached = r.get(f"og:{key}")
    if cached:
        return cached.decode()

    html = build_og_template(title, description)
    url = html_to_image(html)
    r.setex(f"og:{key}", 86400 * 30, url)  # cache 30 days
    return url

Device Emulation for Social Media Formats

Different social platforms require different image dimensions. SnapAPI's device emulation presets cover 30+ device profiles, but for social media image generation, you typically want exact pixel dimensions rather than device simulation.

Platform	Recommended Size	Format
Open Graph (Twitter, Facebook)	1200 x 630	PNG or JPEG
Twitter Summary Card	800 x 418	PNG
LinkedIn Post Image	1200 x 627	PNG or JPEG
Instagram Square	1080 x 1080	JPEG
Email Banner	600 x 200	PNG

Comparing HTML-to-Image APIs

Several services convert HTML to images. SnapAPI differentiates on full browser support, combined screenshot and data extraction in one API, and competitive pricing starting at a free tier with no credit card required.

Unlike services that render only simple HTML with limited CSS support, SnapAPI uses a full Chromium browser. Complex layouts with CSS Grid, Flexbox, CSS variables, and web animations all render correctly. The same API key that generates your OG images also captures full-page screenshots, extracts structured data, and generates PDFs — reducing the number of third-party services in your stack.

Next.js: OG Image Route with SnapAPI

Next.js 13 and later supports App Router API routes, making it straightforward to serve dynamic OG images. Create a route handler that accepts title and description as search params, renders them into an HTML template, calls SnapAPI, and redirects to the resulting CDN URL.

// app/api/og/route.ts
import { NextRequest, NextResponse } from "next/server";

export async function GET(req: NextRequest) {
  const { searchParams } = new URL(req.url);
  const title = searchParams.get("title") ?? "My Site";
  const desc = searchParams.get("desc") ?? "";

  const html = `
    <html>
    <body style="margin:0;background:#0a0c10;font-family:sans-serif;
      display:flex;align-items:center;padding:60px;width:1200px;height:630px;">
      <div>
        <h1 style="color:#fff;font-size:52px;line-height:1.2">${title}</h1>
        <p style="color:#94a3b8;font-size:22px">${desc}</p>
      </div>
    </body>
    </html>
  `;

  const res = await fetch("https://api.snapapi.pics/v1/screenshot", {
    method: "POST",
    headers: { "X-Api-Key": process.env.SNAP_API_KEY!, "Content-Type": "application/json" },
    body: JSON.stringify({ html, width: 1200, height: 630, format: "png" }),
    next: { revalidate: 86400 },  // ISR: cache for 24h
  });

  const { cdn_url } = await res.json();
  return NextResponse.redirect(cdn_url);
}

Use this route as your og:image meta tag value: <meta property="og:image" content="/api/og?title=My+Post+Title&desc=A+short+description" />. The next revalidate option caches the response at the CDN level so the SnapAPI call only fires once per unique title and description combination per day.

Performance Tips for High-Volume Image Generation

For applications that generate hundreds or thousands of images, pre-generate at content creation time rather than on-demand. When a blog post is published or a product is created, enqueue an image generation job and store the resulting CDN URL alongside the content record. This eliminates OG image generation latency from the critical path entirely and ensures social preview images are always available, even on the first crawl by Twitter or LinkedIn bots.

SnapAPI returns CDN-hosted images with long cache lifetimes. The CDN URL is stable and content-addressed, so you can store it permanently in your database and reference it directly without proxying traffic through your own infrastructure.