Quick answer
Browser dev tools: F12 → Elements → right-click a node → 'Capture node screenshot'. Puppeteer: `await page.screenshot({path:'out.png'})`. Playwright: `await page.screenshot({path:'out.png', fullPage:true})`. For one-off conversion of an HTML file, open it in Chrome and use DevTools' full-size screenshot.
Capture HTML/page screenshot via browser DevTools
Chrome and Firefox have built-in screenshot tools that work without any external software.
- Open the page in Chrome → F12 (DevTools) → Cmd/Ctrl+Shift+P (Command Menu).
- Type 'screenshot' → choose 'Capture full size screenshot' (entire page) or 'Capture node screenshot' (a specific element).
- Chrome saves a PNG to your Downloads folder.
- Firefox: F12 → Settings (cog icon) → enable 'Take a screenshot of the entire page' button. Then click the camera icon in the toolbar.
- For node-specific: right-click element in DevTools Elements panel → 'Capture node screenshot'.
Note: DevTools captures actual rendered output including JavaScript-rendered content. Best for one-off use without scripting.
Programmatic conversion with Puppeteer
Puppeteer is Google's headless Chrome library for Node.js. Best for batch jobs, dynamic content rendering, and CI/CD pipelines.
- Install: `npm i puppeteer`.
- Basic script: `const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('file://' + __dirname + '/input.html'); await page.screenshot({path:'output.png', fullPage:true}); await browser.close(); })();`.
- From a URL: `await page.goto('https://example.com', {waitUntil:'networkidle0'});`.
- Specific element: `const el = await page.$('.my-component'); await el.screenshot({path:'out.png'});`.
- Custom viewport: `await page.setViewport({width:1920, height:1080, deviceScaleFactor:2});` (2x for retina).
Note: Puppeteer is the standard tool for programmatic HTML-to-PNG. Runs headless Chromium under the hood. Excellent for OG image generation, automated reports, and visual testing.
Convert with Playwright (cross-browser)
Playwright is Microsoft's headless browser tool — supports Chrome, Firefox, and Safari. Best when you need cross-browser rendering.
- Install: `npm i playwright` (Node) or `pip install playwright && playwright install` (Python).
- Node script: `const {chromium} = require('playwright'); (async () => { const browser = await chromium.launch(); const page = await browser.newPage(); await page.goto('file:///tmp/input.html'); await page.screenshot({path:'output.png', fullPage:true}); await browser.close(); })();`.
- Python equivalent: `from playwright.sync_api import sync_playwright; with sync_playwright() as p: browser = p.chromium.launch(); page = browser.new_page(); page.goto('file:///tmp/input.html'); page.screenshot(path='output.png', full_page=True); browser.close()`.
- Use Firefox engine: replace `chromium` with `firefox` or `webkit`.
Note: Playwright is more feature-rich than Puppeteer (better tracing, multi-browser, mobile emulation). Slightly heavier dependency. For OG images, either works equally well.
Command-line wkhtmltoimage
wkhtmltoimage is a standalone command-line tool that renders HTML using WebKit. Good for non-Node environments.
- Install. Mac: `brew install wkhtmltopdf` (also installs wkhtmltoimage). Windows/Linux: download from wkhtmltopdf.org.
- Basic usage: `wkhtmltoimage --width 1920 --height 1080 input.html output.png`.
- From URL: `wkhtmltoimage https://example.com output.png`.
- Higher quality: `wkhtmltoimage --quality 100 --enable-local-file-access input.html output.png`.
- Note: wkhtmltoimage uses an old WebKit version and doesn't render modern CSS Grid, CSS variables, or recent JavaScript. For modern web content, use Puppeteer or Playwright.
Note: wkhtmltoimage is convenient for simple HTML but lags behind modern browsers. Last meaningful update was 2020.
When you need to convert HTML to PNG
- 1
Generating Open Graph share images programmatically
Build an HTML template per blog post (title, author, date, brand colors) → render to PNG via Puppeteer → upload as OG image. Used by Vercel, Cloudflare, and most modern blog platforms.
- 2
Archiving a web page visually
Capture a full-page PNG of a news article or product page for record-keeping. Preserves what you saw at a specific date — useful for litigation, journalism, competitive intelligence.
- 3
Auto-generating documentation screenshots
Render UI component examples to PNG for documentation. Run via CI on every commit — screenshots stay current automatically.
- 4
Visual testing in CI/CD
Capture rendered output of components, compare against baseline images. Detects visual regressions automatically.
- 5
Email-friendly rendered HTML
Some old email clients render HTML poorly. Render the message in a real browser, capture as PNG, embed image instead of HTML for guaranteed display.
Troubleshooting common HTML to PNG problems
Fonts look wrong (default sans-serif instead of custom)
Browser headless contexts don't always include custom fonts. Solution: load fonts explicitly. Puppeteer: pre-render the page in normal Chrome to confirm fonts are loaded. For embedded fonts, ensure @font-face URLs are absolute or use base64-encoded font data.
JavaScript-rendered content is missing
wkhtmltoimage doesn't execute JS reliably. Switch to Puppeteer/Playwright. Even then, set `waitUntil:'networkidle0'` to wait for async content to load. For React/Vue apps, add explicit `await page.waitForSelector('.my-component')`.
Image is cut off (only viewport, not full page)
Set `fullPage: true` in Puppeteer/Playwright. With wkhtmltoimage, the height auto-extends. With browser DevTools, choose 'Capture full size screenshot' instead of 'Capture screenshot'.
Image is blurry on retina displays
Set `deviceScaleFactor: 2` (or 3 for iPhone Pro). Puppeteer: `await page.setViewport({width:1920, height:1080, deviceScaleFactor:2});`. The PNG is then 2x resolution for sharp rendering on retina.
Local CSS/images don't load
wkhtmltoimage requires `--enable-local-file-access`. Puppeteer/Playwright work fine with `file://` URLs. Ensure all paths are absolute or relative to the HTML file's directory.
Why convert HTML to PNG?
Converting HTML to PNG turns rendered web content into images for sharing, archiving, automated generation, or visual testing. The standard tool for programmatic conversion is Puppeteer (Google) or Playwright (Microsoft) — both run real headless Chrome under the hood for accurate rendering.
For one-off use, browser DevTools' built-in screenshot is the fastest path. For batch and CI/CD use, scripted Node or Python with headless browser libraries.
Frequently asked questions
Best free tool for HTML to PNG?
Can I capture a specific element instead of the whole page?
Does it work for JavaScript-heavy pages?
How do I generate OG images at scale?
Will the PNG support transparency?
No account. No upload. Works in any browser.