About

Converting HTML to a raster image is a non-trivial rendering problem. Browsers parse HTML into a DOM tree, apply CSS cascade rules, compute layout geometry, composite layers, and rasterize pixels. Replicating that pipeline outside a browser historically required headless engines like PhantomJS or Puppeteer. This tool performs the entire conversion client-side by leveraging the browser's own rendering engine: your HTML is laid out in a sandboxed iframe at the specified viewport width W, then serialized into an SVG foreignObject, drawn onto a Canvas at scale factor s, and exported as a PNG blob. No server round-trip. No data leaves your machine.

Limitations exist. External resources (images, fonts, stylesheets from remote origins) will not render due to CORS restrictions unless they are inlined as base64 data URIs. JavaScript within the HTML is not executed. The output resolution in pixels equals W × H × s, where H is the computed document height. For production screenshots of live URLs with full JS execution, a server-side headless browser remains necessary. For static HTML, emails, templates, and CSS art, this tool produces pixel-accurate results.

Formulas

The output PNG dimensions are computed from the viewport width, the document's computed height, and the user-selected scale factor:

W_out = W_viewport × s

H_out = H_document × s

Where W_viewport is the simulated browser width in pixels, H_document is the rendered document scroll height, and s is the scale factor (1 = 96 DPI, 2 = 192 DPI).

The rendering pipeline follows this sequence:

HTML string → DOMParser → Sandboxed iframe → XMLSerializer → SVG foreignObject → Image → Canvas → toBlob → PNG

The SVG wrapper encodes the HTML inside a foreignObject element with explicit width and height attributes matching the viewport. The canvas is sized to W_out × H_out and the context is scaled by s via drawImage stretching. Total pixel count must remain below the browser canvas limit of 268435456 pixels (16384²).

Reference Data

Parameter	Default	Range	Description
Viewport Width	1024 px	320 - 3840	Simulated browser window width for layout computation
Scale Factor	1×	0.5 - 4	Multiplier for output resolution (2× = Retina)
Background	transparent	Any CSS color	Canvas fill behind the HTML content
Output Format	PNG	PNG only	Lossless raster with alpha channel support
Max Canvas Area	16384 × 16384 px		Browser limit; exceeding causes blank output
foreignObject Support	All modern browsers		Chrome 4+, Firefox 3+, Safari 5+, Edge 12+
CORS Restriction	Same-origin only		External images/fonts must be base64-inlined
Script Execution	FALSE		Sandboxed iframe blocks JS for security
CSS Support	Full inline + <style>		External stylesheets must be inlined
SVG in HTML	Supported		Inline SVG renders correctly
Web Fonts	Base64 @font-face only		Remote font URLs blocked by CORS
Typical Render Time	200 - 1500 ms		Depends on DOM complexity and scale
PNG Compression	Browser default		Canvas.toBlob uses deflate internally
Color Space	sRGB		Standard color space for web content
Alpha Channel	Preserved		Transparent background yields PNG with alpha

Frequently Asked Questions

The conversion uses an SVG foreignObject pipeline. When the browser loads external image URLs inside this SVG context, CORS (Cross-Origin Resource Sharing) policies block cross-origin resources, tainting the canvas and preventing export. To fix this, convert external images to base64 data URIs before pasting your HTML. Use the format: <img src="data:image/png;base64,iVBOR...">. The same applies to external CSS background-image URLs.

JavaScript is not executed. The HTML is rendered inside a sandboxed iframe with the sandbox attribute set, which blocks script execution for security. The tool captures the static DOM state only. If your layout depends on JS-generated content (e.g., a chart library rendering a canvas), you must pre-render that content and paste the resulting HTML/SVG markup.

Scale factor s multiplies both width and height, so total pixel count grows by s². A scale of 2× produces 4× the pixels and roughly 2-4× the file size. Use 2× for Retina displays, 3× for print at approximately 288 DPI. Going above 4× risks exceeding the browser's maximum canvas area (16384 × 16384 px), which produces a blank image.

Not directly from this client-side tool. CORS prevents fetching arbitrary URLs from the browser. However, you can open the target page, use your browser's Developer Tools (Ctrl+U or View Source), copy the full HTML source, and paste it into this tool. For pages that rely heavily on external stylesheets, you would need to inline those styles. For automated URL-to-PNG conversion with full JS execution, a server-side headless browser (Puppeteer, Playwright) is required.

Three common causes: (1) The HTML contains cross-origin resources that tainted the canvas, causing toBlob to fail silently. Remove or inline external assets. (2) The computed document height is zero because the HTML body has no visible content or uses absolute positioning that doesn't expand the document flow. Add explicit dimensions. (3) The total canvas area exceeds the browser limit. Reduce viewport width or scale factor.

Yes. The HTML is rendered by your actual browser engine inside an iframe. Any CSS feature your browser supports will render correctly, including Grid, Flexbox, custom properties (CSS variables), calc(), clamp(), and animations (captured at their initial frame). Media queries will respond to the configured viewport width.

There is no hard limit on HTML string length, but practical limits apply. The SVG foreignObject wrapper must be parsed as a valid XML document, so very large DOMs (over ~50,000 nodes) may cause parsing delays of several seconds. The canvas pixel limit of 268435456 pixels constrains the output dimensions. For documents longer than approximately 10000 px in height at 2× scale, consider reducing the scale factor.