Format Guide

HTML to PNG. Lossless, transparent, pixel-perfect.

Convert HTML and CSS to PNG images with one API call. Full Tailwind support, custom fonts, transparent backgrounds, and Retina output.

Start Converting API Reference

<1.2s

Render

4096px

Max width

Alpha

Transparency

index.htmlInput

<div class="card">
  <h1>Weekly Report</h1>
  <p>Revenue: $48.2k</p>
</div>

rendshot → .png

card.pngOutput

Weekly Report

$48.2k

5 Ways to Convert HTML to PNG

From manual screenshots to API automation — every approach compared.

Browser DevTools

Best for: One-off screenshots for design review

Right-click → Inspect → Screenshot node

Pros

No setup needed
Works on any page

Cons

Manual — not automatable
Inconsistent viewport/DPI
No API integration

Puppeteer / Playwright

Best for: When you need JS execution or browser interaction

Launch headless browser, set viewport, call page.screenshot()

Pros

Full browser rendering
Automatable
JavaScript execution

Cons

Requires hosting Docker + Chromium
Memory leaks in production
2-5s cold start per render

wkhtmltoimage

Best for: Legacy systems with simple HTML

CLI tool that converts HTML to image via Qt WebKit

Pros

Fast for simple HTML
No browser dependency

Cons

Outdated WebKit engine
Poor CSS3/Flexbox/Grid support
No Tailwind CSS

Online converters

Best for: Quick one-off conversions

Paste HTML in a web form, download PNG

Pros

No setup
Free

Cons

Not programmable
No batch processing
Privacy concerns with sensitive HTML

RendShot APIRecommended

Best for: Automated, high-volume HTML-to-PNG at scale

POST your HTML + CSS, get back a CDN-hosted PNG URL

Pros

Full CSS support (Tailwind, Grid, Flexbox)
Sub-second rendering
50+ Google Fonts auto-loaded
Transparent background support
No infrastructure to maintain

Cons

Requires API key (free tier available)
No JavaScript execution

Why PNG?

The format of choice for UI screenshots, diagrams, and anything with text.

Transparent backgrounds

PNG supports alpha transparency — perfect for logos, overlays, and compositing on any background.

Lossless quality

Unlike JPEG, PNG uses lossless compression. Every pixel is exact — ideal for UI screenshots and text-heavy images.

Retina / 2x output

Set deviceScaleFactor to 2 for crisp output on HiDPI displays. RendShot supports up to 4096×4096 pixels.

Smaller than you think

For flat-color designs (UI, charts, diagrams), PNG compresses extremely well — often smaller than equivalent JPEG.

Integration

One API call. One PNG.

Works with any language or framework. Send HTML, get back a CDN-hosted PNG URL.

curl -X POST https://api.rendshot.ai/v1/image \
  -H "Authorization: Bearer rs_live_..." \
  -d '{
    "html": "<div style=\"background:#1a1816;color:white;padding:40px;font-family:Inter\">Hello World</div>",
    "width": 800,
    "height": 400,
    "format": "png"
  }'

# → { "url": "https://assets.rendshot.ai/img/abc123.png" }

PNG, JPEG, WebP output

Transparent backgrounds

Retina / 2x support

Up to 4096×4096 pixels

PNG vs JPEG vs WebP

Choose the right format for your use case.

Feature	PNG	JPEG	WebP
Transparency
Compression	Lossless	Lossy	Both
File size (UI screenshot)	~150 KB	~80 KB	~60 KB
File size (photo)	~2 MB	~200 KB	~150 KB
Browser support	100%	100%	97%
Best for	UI, logos, text, diagrams	Photos, gradients	General — best of both
RendShot support

HTML to JPEG guide →OG Image Generator →Screenshot API →Puppeteer alternative →All integrations →

FAQ

Common questions about HTML to PNG conversion

What is the difference between HTML to PNG and a screenshot?

A screenshot captures whatever is on screen, including browser chrome, scroll position, and OS rendering differences. HTML-to-PNG rendering gives you a clean, isolated image of just your HTML content at an exact viewport size — consistent across all environments.

Does RendShot support Tailwind CSS?

Yes. RendShot renders with a full Chromium browser engine, so all CSS features work — Tailwind, CSS Grid, Flexbox, custom properties, animations (captured as a single frame), and web fonts.

Can I get a transparent background?

Yes. Set the format to PNG and don't add a background color to your HTML body. RendShot will output a PNG with alpha transparency, perfect for overlays and compositing.

What is the maximum image size?

Up to 4096×4096 pixels with a maximum pixel budget of 16.7 million pixels (e.g., 4096×4096). For standard use cases like OG images (1200×630) or social cards (1080×1080), this is more than enough.

How does Retina / 2x output work?

Pass deviceScaleFactor: 2 in your API request. RendShot will render at 2x resolution — a 600×400 viewport becomes a 1200×800 pixel image. Text and vectors stay crisp on HiDPI screens.

Is there a free tier?

Yes. 100 image renders per month, 10 requests per minute, 7-day image retention. No credit card required. Upgrade to Pro ($19/month) for 10,000 renders and 30-day retention.

Start converting HTML to PNG.

100 free renders per month. No credit card. Full API access from day one.

Get Your Free API Key Read the docs