HTML to Image Converter — Free, PNG & JPG, No Upload

Turn any HTML snippet into a shareable image

Paste HTML and CSS, set the pixel dimensions you need, and download a PNG, JPEG, or WEBP — an Open Graph card, a Twitter/X preview, an email banner, a certificate, a design mockup, or a styled code snippet. It converts the markup you paste (not a live URL), and it does the whole job inside your browser tab: your code never touches a server, which is why there’s no upload step, no queue, and no file-size cap.

Once you have the image you can compress it, convert it to another format, or — if you actually need a document with selectable text rather than a flat image — turn the same HTML into a PDF instead.

How it actually works (and why that explains every quirk)

This isn’t a screenshot. When you click Download, your markup is wrapped in an SVG <foreignObject>, serialized to a data URL, painted onto an HTML <canvas>, and read back out with canvas.toDataURL() — all client-side. That one pipeline explains the three things people most often trip over.

JavaScript never runs. The foreignObject approach captures a static snapshot of the DOM, so if your layout depends on a script to build itself, render it to its final state first, then paste the result.

Cross-origin fonts and images can drop out. The canvas refuses to export once it has been “tainted” by an asset loaded from another domain — so a Google Font linked by URL shows in the live preview but quietly vanishes from the download. The fix is to inline it: embed the font as a base64 @font-face rule, or fall back to a system font.

Scale is real resolution, not zoom. Set Scale to 2x and the layout is rasterized at double density, so a 1200×630 design exports at 2400×1260 pixels — exactly what retina timelines want.

A worked example: a 1200×630 Open Graph card

Say you want an og:image for a blog post. Pick the OG Image (1200×630) preset, paste a self-contained snippet like this, set Scale to 2x, and download. Because the styles are inline, it renders identically in the preview and the export:

<div style="width:1200px;height:630px;display:flex;
  flex-direction:column;justify-content:center;
  padding:80px;box-sizing:border-box;color:#fff;
  font-family:Georgia,serif;
  background:linear-gradient(135deg,#1e3a8a,#7c3aed)">
  <p style="font-size:28px;opacity:.8;margin:0">ultimatetools.io</p>
  <h1 style="font-size:72px;line-height:1.1;margin:16px 0 0">
    How to Make an Open Graph Image
  </h1>
</div>

At 2x that exports a crisp 2400×1260 PNG of roughly 180 KB. Switch the format to JPEG at the same size and it drops to about 40 KB on a white background — fine for an email banner, but keep PNG or WEBP if you need the gradient razor-sharp or the background transparent.

Social image size cheat-sheet

Match the width and height to where the image will appear so it renders sharp and uncropped:

Save HTML as an image in three steps

1. 1. Paste your HTML and CSS into the editor — the live preview renders as you type. To load a file instead, switch to the Upload HTML tab and pick a .html file (it is read in your browser, not uploaded).
2. 2. Set the size in pixels or choose a preset, and bump Scale to 2x for high-DPI output.
3. 3. Choose PNG, JPEG, or WEBP and click Download. PNG and WEBP keep transparency; JPEG is the smallest on a white background.

How it compares to the alternatives

This tool is the fastest route when you already have the HTML and want an exact-dimension image with nothing installed. It is honestly not the right choice for capturing a live, JavaScript-heavy page — for that, reach for a headless browser. The trade-offs:

Need a pixel-perfect shot of a live page that runs scripts? Puppeteer or a DevTools capture will beat this every time. Just turning a card or template into an image? Pasting it here is faster than all of them.

Common problems — and the fix

The download is blank or missing part of the layout

Usually a cross-origin image tainted the canvas. Swap remote images for base64 data URIs, or host them on the same domain, then export again.

Your web font didn’t render

foreignObject can’t fetch an external font mid-export. Inline it as a base64 @font-face rule, or use a system stack like -apple-system, Segoe UI, Roboto, sans-serif.

Your Tailwind CSS classes didn’t apply

Same root cause as the fonts: an external stylesheet isn’t loaded during export, so utility classes from a Tailwind CDN or build silently do nothing. Inline the styles you need directly on the elements, or paste them into the Custom CSS tab, instead of relying on Tailwind classes.

Text looks soft or pixelated

You exported at 1x. Set Scale to 2x or 3x so the layout rasterizes at higher density.

A transparent area came out white or black

JPEG has no alpha channel. Export as PNG or WEBP to keep transparency; JPEG fills it with the background colour.

When not to use this tool

If you want a screenshot of a live website — especially one behind a login or one that builds itself with JavaScript — this is the wrong tool; a browser screenshot or Puppeteer will serve you better. If you need a multi-page, print-fidelity document with selectable text, convert your HTML to a PDF instead. This tool is built for one job and does it well: turning self-contained HTML and CSS into an exact-size raster image.

Frequently asked questions