How to Convert HTML to JPG or PNG (Browser Tool, Puppeteer and html2canvas Compared)

The browser tool and Puppeteer render with a real browser engine, so modern CSS (flexbox, grid, gradients, custom properties) comes out the way the browser draws it; html2canvas re-implements CSS on a canvas and documents the properties it cannot draw.

The free HTML to Image converter on this site is the no-install route from HTML code to a PNG, JPEG or WEBP file. It has three input tabs: HTML Code (pre-filled with a sample card; Reset restores it), Upload HTML (pick a .html or .htm file; its text lands in the editor and the tab shows a Loaded note with the file name) and Custom CSS (rules applied to both the preview and the export). Everything, including reading the uploaded file, happens in your browser tab; nothing is sent to a server.

Under Advanced Image Options, open by default, you choose the format (PNG, JPEG or WEBP; PNG selected), a scale of 1x, 2x or 3x (2x selected), a quality from 10 to 100 for JPEG and WEBP (90 by default; greyed out for lossless PNG), a background of White, Transparent or a custom colour, and a width and height in pixels, 800 by 400 to start. Four presets fill the size: Twitter Card 1200 by 628, OG Image 1200 by 630, Square 800 by 800 and Story 1080 by 1920. The button reads Generate & Download plus the format name.

Your markup goes into a foreignObject inside an SVG sized at width times scale by height times scale, with a viewBox of the plain width and height, so the layout is composed at your CSS size and rasterised at the multiplied size: 2x is real resolution, not upscaling. The SVG becomes a data URL, is loaded into an image element, painted onto a canvas and read back with toDataURL. No JavaScript in your HTML runs: not in the export, nor in the preview, a sandboxed iframe without script permission. The preview can otherwise fetch remote images and fonts; the export cannot, so trust the preview for layout, not for assets.

html2canvas is for the download-this-card button inside an app you control: it walks the DOM of an element that is already rendered, reads the computed styles and redraws them with the canvas API, so it captures only what is in the current document and opens no URL.

The call takes the element and an options object: scale multiplies the output resolution (default: the device pixel ratio), useCORS requests cross-origin images with CORS headers, and backgroundColor null keeps transparency instead of the default white fill. Coverage is the limit, because it redraws CSS itself: the documentation lists unsupported properties including box-shadow, filter and mix-blend-mode, and it does not render iframes or plugin content; if your card leans on those, use another method.

Puppeteer launches headless Chrome from Node, so it renders exactly what Chrome renders: external fonts and remote images load, scripts run, and you can point it at a URL or hand it an HTML string. It is the tool for a hundred OG images from one template, or for a page that assembles itself with JavaScript.

In the sample, deviceScaleFactor is the browser tool's Scale: the layout stays 1200 by 630 and the file is 2400 by 1260. page.screenshot writes PNG unless you pass type jpeg or webp, quality applies only to those two, fullPage captures beyond the viewport and omitBackground gives a transparent PNG instead of Chrome's white page. The cost is operational: Puppeteer downloads its own Chrome and needs a Node runtime that can launch a browser process, which rules out static and most shared hosting.

Four problems account for most mismatches between screen and file; cause and fix differ by method.

Cards are text on flat colour, the worst input for a lossy codec: JPEG puts faint halos around crisp letters and hard edges, so for a typical card PNG is sharper and often not much larger. JPEG earns its place when a photograph or large gradient dominates, or when an uploader refuses PNG; keep quality at 90 or above, because artefacts show on text first. WebP is usually the smallest at comparable quality and keeps transparency, but some CMS uploaders still reject it.

JPEG has no alpha channel, so a transparent background never survives, and what replaces it differs by method: the browser tool warns you and fills the canvas white; Puppeteer ignores omitBackground for JPEG and gives Chrome's white page; html2canvas with backgroundColor null flattens transparent pixels onto black when you call toDataURL('image/jpeg'), so keep its default white fill. Real transparency means PNG or WEBP in the tool, a PNG screenshot with omitBackground in Puppeteer, or a PNG with backgroundColor null in html2canvas.