Comma

Free tool

HTML to image.

Paste HTML or drop an .html file and turn it into a PNG or JPEG — a 1200×630 social card, a full-page screenshot at desktop or phone width, charts included. It renders in your browser, so nothing is uploaded.

index.html
1.1 KBStays in your browser — nothing uploads.
Image options
1200 × 630 · 2× · shown at 47%

The capture is exactly the width × height shown. Images and fonts from other sites must be embedded to appear.

Screenshotting a report to send it? Send the report.

A link keeps tables selectable and charts interactive, reads on a phone, updates in place, and readers comment on the exact number. Free, no card.

What the converter does

  • Renders your HTML at a real viewport width — 1200 for a social card, 1280, 1024, 768 or 390 for desktop, laptop, tablet and phone — so responsive CSS and media queries behave the way they will for a reader.
  • Runs the page’s JavaScript first, then copies canvas charts pixel for pixel and keeps SVG charts as vectors until the final paint.
  • Captures either the full document height or an exact width × height, at 1×, 2× or 3× pixel density, as PNG (with optional transparency) or JPEG.
  • Hands you the image to download or paste straight into Slack, a doc or a ticket — no account, no watermark, no upload.

Making social cards and OG images from HTML

Open Graph and Twitter images are 1200×630. Design the card as an ordinary HTML page — set html, body { height: 100% } and lay it out with flexbox — pick the Social card size, leave Full page off and capture at 1× for the exact pixel size the platforms expect, or 2× for a sharper image they will scale down. The Card sample above is a starting point. Big type, three or four words of emphasis and generous margins survive the thumbnail crop on every platform.

When the image doesn’t match the page

Blank images and system fonts mean the page references files on another site; inline them with the HTML inliner or image to Base64. A layout that looks squeezed was designed wider than the size you picked — the preview is drawn at the capture width, so what you see there is what you get. Very tall pages at 3× can exceed the browser’s canvas limit; the capture is then scaled down automatically, and 1× or 2× keeps it sharp.

Questions

How do I convert HTML to an image?
Paste the HTML or drop an .html file on this page, pick a size — a 1200×630 social card, a desktop, laptop, tablet or phone width, or your own — choose PNG or JPEG and a 1×, 2× or 3× scale, and click “Capture”. The image appears below the preview, ready to download or copy.
Is my HTML uploaded to a server?
No. Most HTML to image services send your markup to a server that runs a headless browser and returns a screenshot. This one renders the page in a sandboxed frame in your tab and draws it to a canvas there, so the HTML and the image never leave your machine.
Can I capture the whole page, not just the top?
Yes. With “Full page” on, the image is as tall as the rendered document at the width you picked. Turn it off to capture exactly the width × height you set — which is what you want for a social card or a fixed-size banner.
Do JavaScript charts appear in the image?
Yes. The page's scripts run before the capture, and canvas elements — Chart.js, ECharts, a hand-drawn canvas — are copied pixel for pixel. SVG charts from D3 or Plotly are captured too. If the chart animates in, wait for it to finish before you click Capture.
Why are some images or fonts missing from the result?
Images and web fonts hosted on other sites have to be fetched to be embedded, and this page doesn't fetch arbitrary third-party URLs, so they come out blank or fall back to a system font. Embed them first — the HTML inliner and image to Base64 tools turn them into data URIs — and they capture normally.
PNG or JPEG?
PNG for anything with text, sharp edges or transparency — UI, dashboards, cards. JPEG for photo-heavy pages where file size matters more than crisp type. Use 2× for anything that will be viewed on a phone or a retina screen.
Should I send an image or a link?
An image is right for a slide, a social post or a ticket thumbnail. For a report people need to read and discuss, a link usually beats a screenshot: tables stay selectable, charts stay interactive, a fix doesn't mean re-capturing, and readers comment on the exact number. “Get a shareable link” turns the same HTML into a Comma report.

Related: HTML to PDF · HTML viewer · HTML inliner · SVG viewer · Mermaid viewer · all free tools · stop screenshotting reports