Free tool · lossless PNG
HTML to PNG
Paste HTML and CSS and download it as a PNG: sharp text, exact colours and no compression artefacts. Rendered by a real browser, free, no sign-up.
When to use PNG
| Content | Best format |
|---|---|
| Text, UI, diagrams, code, logos | PNG: lossless, sharp edges |
| Photos and large gradients | JPG or WebP: much smaller files |
| Images for the web where size matters | WebP |
PNG files of photo-heavy pages get large quickly. If the file size matters more than perfect edges, switch the format to JPG or WebP in the tool, or use HTML to JPG.
Size and resolution
The size is the browser window in CSS pixels; Retina doubles it in both directions. Full height of the document captures everything below the window too, so long HTML becomes one tall PNG.
HTML to PNG in your code
POST /v1/take with html and "format": "png" returns the PNG; see the Render HTML documentation. The same endpoint renders HTML to PDF and captures websites by their URL.
Frequently asked questions
How do I convert HTML to PNG?
Why PNG and not JPG?
Can the PNG have a transparent background?
How do I get a high-resolution PNG?
HTML to PNG API
Turn HTML templates into PNGs from your code
POST /v1/take with html and format=png renders your HTML in Chromium and returns the PNG. Set the size, the pixel ratio and extra CSS, or capture the full height of the document.
/v1/take documentation HTML rendering API All documentation
300 free requests every month, and each PNG from HTML counts as one. No credit card required.
POST https://api.screenshotbase.com/v1/take
# Response: the PNG (image/png)
curl -X POST "https://api.screenshotbase.com/v1/take" \
-H "apikey: YOUR-API-KEY" \
-H "Content-Type: application/json" \
-d '{"html": "<h1>Hello</h1>", "format": "png", "viewport_width": 1200, "viewport_height": 630, "device_scale_factor": 2}' \
-o card.png