HTML to Image

Sometimes the fastest way to make a graphic is to write a few lines of HTML and CSS. A social sharing card with a headline, a styled quote, release notes for a newsletter, a pricing box for a slide or a code-styled announcement are all easy to lay out with web technology. This tool takes that HTML and CSS and turns it into a PNG, JPG or WebP image, entirely in your browser.

How rendering works without a server

The markup is first cleaned with DOMPurify, which removes scripts and other active content. The cleaned HTML is then measured in an isolated part of the page and drawn into an SVG image using a feature called foreignObject. The browser lays it out with its own engine, exactly as it would on a web page, and the result is painted onto a canvas and saved. No headless browser on a server is involved, and your code never leaves the device.

Size presets

“800 wide” and “1200 wide” fix the width and let the height follow the content, ideal for blog images and newsletter blocks. “Social card 1200×630” matches the Open Graph size used by Facebook, LinkedIn, X and messaging apps for link previews. “Square 1080” fits Instagram posts. “Custom” takes any width from 16 to 4096 pixels and a height up to 8192, where a height of 0 means “fit the content”.

Pixel density

At 2× or 3×, the same layout is rendered with more pixels, the way phones and high-resolution laptops display web pages. Text and lines stay crisp when the image is shown at its intended size on such screens. The file gets larger, so 2× is a good default for social images and 1× for email, where size matters more.

Transparent backgrounds

For PNG and WebP, switch on “Transparent background” to keep areas outside your design see-through, useful for badges, stickers and elements to place on slides. JPG has no transparency and uses the background from your CSS, or white.

External files and fonts

Images, stylesheets and fonts referenced by an address are not loaded, because browsers block outside files inside SVG images for security. The page warns you which addresses were found. To include a logo or photo, convert it with Image to Base64 and paste the data: URL into the src. For typefaces, use fonts installed on the system, or embed a font file as a data: URL inside an @font-face rule.

Scripts do not run

JavaScript is removed before rendering, and SVG images could not run it anyway. Content generated by scripts, such as charts drawn at runtime, will not appear. Paste the final HTML, or an exported SVG of the chart, instead.

Browser support

Chrome, Edge and Firefox can save these renderings. Safari draws them but forbids reading the pixels back, so the page explains that and suggests another browser.

Tips for good results

Set an explicit width on the outer element, use padding generously, and prefer system font stacks for predictable text. Test both light and dark versions if the image will appear in apps with themes.

Related tools

For screenshots of real windows, use the Screenshot Beautifier to add frames and backgrounds. To turn HTML into a printable document instead, see HTML to PDF.