How to Convert HTML to Image (PNG or JPG) in 2026

Why convert HTML to image?

There are many situations where turning an HTML layout into a static image is the most practical solution: sharing a design preview without sending code, generating page thumbnails, exporting email components as PNGs for presentations, creating template previews, or capturing the state of a dynamic chart at a specific moment. Knowing how to do this quickly and reliably saves hours of work.

Main use cases

• Generate email HTML previews before sending to your list.
• Export UI components as images for presentations and documentation.
• Capture charts and dashboards as PNG for reports.
• Automatically create blog post thumbnails from HTML templates.
• Convert HTML invoices and receipts into images for storage or sharing.
• Turn ad banners and creatives into image files ready for upload.

Method 1: Online tools (simplest)

For those who don't want to install anything, tools like Lumageni's HTML to Image let you paste HTML code directly in the browser and download the result as PNG or JPG. Just paste the HTML, set the dimensions, and click convert. The conversion happens locally in the browser without uploading any data to a server.

Method 2: html2canvas (JavaScript in the browser)

The html2canvas library captures a DOM element and renders it onto a Canvas. It powers many online tools and can be integrated directly into React, Vue, or plain JavaScript projects. It works well for simple layouts but may struggle with external fonts, iframes, and some advanced CSS properties.

• Install via npm: npm install html2canvas
• Import and call: html2canvas(document.getElementById('my-element'))
• Get the canvas and convert to a dataURL with canvas.toDataURL('image/png')

Method 3: Puppeteer (Node.js, server-side)

For automated server-side solutions, Puppeteer launches a headless Chrome instance, loads the HTML, and takes a screenshot. It is the most visually accurate method, supporting Google Fonts, CSS animations, and JavaScript. The downside is that it requires Node.js and can be heavy for serverless environments.

• Install: npm install puppeteer
• Use page.setContent(html) to load HTML directly.
• Call page.screenshot({ path: 'output.png', type: 'png' }) to save.
• Use page.emulateMediaType('screen') to simulate screen rendering.

Tips for a high-quality result

• Set explicit width and height on the body in CSS to avoid unexpected sizes.
• Use embedded base64 fonts or system fonts to ensure correct rendering.
• Avoid external images without CORS enabled — prefer base64 or data URLs.
• Use 2x scale (devicePixelRatio: 2) for crisp images on Retina screens.
• Test the output at different resolutions before distributing.