HTML to image converter (PNG, JPG)

Q: How do I convert HTML to PNG?

Paste the HTML above (or open the .html file), choose a width, leave the format on PNG and press Download PNG. PNG is the right default for pages that are mostly text, tables and flat colour: it keeps edges sharp and supports transparency.

Q: How do I convert HTML to JPG?

Switch the format to JPG before downloading. JPG files are much smaller for pages full of photographs, at the cost of slightly soft text. A JPG has no transparency, so a transparent page background is exported as white.

Paste HTML or open a .html file. It renders with its own CSS and JavaScript, then downloads as a PNG or JPG at desktop, tablet or phone width. Nothing is uploaded.

Renders in your browser at the width you pick. Nothing is uploaded unless you choose to publish.

Width

Format

Full pageScale

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Weekly report</title>
    <style>
      body { margin: 0; font: 16px/1.5 system-ui, sans-serif; background: #f5f7fb; color: #111827; }
      main { padding: 32px; }
      h1 { margin: 0 0 4px; font-size: 26px; }
      .sub { margin: 0 0 20px; color: #6b7280; }
      .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
      .card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px; }
      .num { font-size: 28px; font-weight: 700; color: #1d4ed8; }
      .bars { display: flex; align-items: flex-end; gap: 8px; height: 120px; margin-top: 20px;
              background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px; }
      .bar { flex: 1; background: #3b82f6; border-radius: 4px 4px 0 0; }
    </style>
  </head>
  <body>
    <main>
      <h1>Weekly report</h1>
      <p class="sub" id="stamp"></p>
      <div class="cards">
        <div class="card"><div class="num">1,204</div>pages published</div>
        <div class="card"><div class="num">38%</div>came back next week</div>
        <div class="card"><div class="num">4.9</div>average rating</div>
      </div>
      <div class="bars" id="bars" aria-label="Pages per day"></div>
    </main>
    <script>
      // Drawn by script: this is what proves JS output reaches the image.
      document.getElementById('stamp').textContent =
        'Built by this page\'s own script on ' + new Date().toDateString();
      [42, 58, 51, 77, 64, 90, 71].forEach(function (v) {
        var b = document.createElement('div');
        b.className = 'bar';
        b.style.height = v + '%';
        document.getElementById('bars').appendChild(b);
      });
    </script>
  </body>
</html>

Preview1280 px wide

Paste some HTML — or open a .html file — to render it.

Full page is on: the image runs to the bottom of the page, past what this preview shows.

The page's own CSS and JavaScript run before the capture, so charts and generated content are in the image. Images and fonts from other sites are included only when their server allows it — the rest are left blank.

Sometimes a page has to travel as a picture. A slide deck will not embed a live web page, a support ticket wants a screenshot, a social post takes an image and nothing else, and a report that was generated as HTML still has to be pasted into a chat that only previews images.

Taking a screenshot of your own screen gets you whatever your window happens to show: your browser chrome, your zoom level, and only the part above the fold. This converter renders the HTML at an exact width — 1280, 768 or 390 pixels — lets the page run its own scripts so charts and generated tables are drawn, and exports the whole page as one image, at twice the pixel density if you want it sharp on a retina screen. PNG keeps transparency and crisp text; JPG is smaller for photo-heavy pages.

How the conversion works

1.
Paste or open the HTML. A full document or a fragment. Opening a file reads it in your browser; nothing is sent anywhere.
2.
Pick the width the page was made for. Desktop 1280, tablet 768 or phone 390. Media queries respond to that width, so you get the layout a reader on that device would see.
3.
Let the page run. The preview is a sandboxed frame, so the page’s own JavaScript draws its charts and fills in generated content before anything is captured. It cannot reach this site or your session.
4.
Download PNG or JPG. With Full page on, the image runs to the bottom of the page, not just the first screen. 2× scale doubles the pixels for high-density screens.

A real example

An analyst has a weekly KPI report that a script writes out as report.html: four headline numbers and a bar chart drawn by a small piece of JavaScript. The leadership channel it goes to previews images inline and shows HTML attachments as a download nobody clicks.

She opens this page, clicks Open .html file and picks the report. The preview lays it out at 1280 pixels, the width the charts were designed for, and the bars appear because the file’s own script ran. She leaves Full page on — the table under the chart runs past the first screen — and presses Download PNG. The result is a 2560-pixel wide image at 2× density, sharp enough to zoom into on a phone.

For the two people who want to click into the table rather than squint at it, she also publishes the same file as a link. The image goes in the channel; the link goes in the thread under it.

The HTML to image converter at desktop width: the weekly-report sample on the left, its rendered preview with a script-drawn bar chart on the right, and the finished export reported as 2560 by 1600 pixels, 141 KB. — The sample above, exported at Desktop 1280 and 2× scale. The bars are drawn by the page’s own script and are in the PNG.

This converter vs. a screenshot of your screen

Both give you a picture of a page. They disagree on what ends up in it.

The whole page, not just the first screen
Full page follows the document to its last pixel.
This converter
Yes
Screen capture
No
An exact width (1280 px on any device)
A screen capture is whatever size your window is.
This converter
Yes
Screen capture
Partly
Charts and content drawn by JavaScript
Scripts run in the preview before the capture.
This converter
Yes
Screen capture
Yes
No browser toolbar, cursor or zoom in the image
Only the page is rendered.
This converter
Yes
Screen capture
Partly
Images and fonts hosted on other sites
Included when that site allows cross-origin requests; otherwise left blank.
This converter
Partly
Screen capture
Yes

What you need	This converter	Screen capture
The whole page, not just the first screenFull page follows the document to its last pixel.
An exact width (1280 px on any device)A screen capture is whatever size your window is.
Charts and content drawn by JavaScriptScripts run in the preview before the capture.
No browser toolbar, cursor or zoom in the imageOnly the page is rendered.
Images and fonts hosted on other sitesIncluded when that site allows cross-origin requests; otherwise left blank.

YesPartlyNo

Questions about html to image

How do I convert HTML to PNG?

Paste the HTML above (or open the .html file), choose a width, leave the format on PNG and press Download PNG. PNG is the right default for pages that are mostly text, tables and flat colour: it keeps edges sharp and supports transparency.

How do I convert HTML to JPG?

Switch the format to JPG before downloading. JPG files are much smaller for pages full of photographs, at the cost of slightly soft text. A JPG has no transparency, so a transparent page background is exported as white.

Does my HTML get uploaded to a server?

No. The page is rendered and rasterised inside your browser tab — there is no server-side renderer involved. The only way your HTML leaves the device is if you press Publish as a live link, which is a separate, deliberate step.

Why is an image from another site missing in the PNG?

To paint an image into a picture, the browser has to be allowed to read its pixels, and a site that does not send cross-origin headers forbids that. The page still displays the image, but it cannot be copied into the export, so that spot is left blank. Hosting the image yourself, or inlining it as a data: URL, fixes it.

Should I send an image or a link?

An image is right when the destination only takes pictures — a slide, a ticket, a social post. When people need to click, scroll or copy text, a link to the live page is better, and it can be updated after you send it. See HTML file to link.

Keep your links forever

Free links last 7 days with a free account. On a paid plan every page you create stays online permanently.

See pricing

Related use cases

How the conversion works

Paste or open the HTML. A full document or a fragment. Opening a file reads it in your browser; nothing is sent anywhere.

Pick the width the page was made for. Desktop 1280, tablet 768 or phone 390. Media queries respond to that width, so you get the layout a reader on that device would see.

Let the page run. The preview is a sandboxed frame, so the page’s own JavaScript draws its charts and fills in generated content before anything is captured. It cannot reach this site or your session.

Download PNG or JPG. With Full page on, the image runs to the bottom of the page, not just the first screen. 2× scale doubles the pixels for high-density screens.

A real example

For the two people who want to click into the table rather than squint at it, she also publishes the same file as a link. The image goes in the channel; the link goes in the thread under it.

The sample above, exported at Desktop 1280 and 2× scale. The bars are drawn by the page’s own script and are in the PNG.

This converter vs. a screenshot of your screen

Both give you a picture of a page. They disagree on what ends up in it.

The whole page, not just the first screen
Full page follows the document to its last pixel.
This converter
Yes
Screen capture
No
An exact width (1280 px on any device)
A screen capture is whatever size your window is.
This converter
Yes
Screen capture
Partly
Charts and content drawn by JavaScript
Scripts run in the preview before the capture.
This converter
Yes
Screen capture
Yes
No browser toolbar, cursor or zoom in the image
Only the page is rendered.
This converter
Yes
Screen capture
Partly
Images and fonts hosted on other sites
Included when that site allows cross-origin requests; otherwise left blank.
This converter
Partly
Screen capture
Yes

What you need	This converter	Screen capture
The whole page, not just the first screenFull page follows the document to its last pixel.
An exact width (1280 px on any device)A screen capture is whatever size your window is.
Charts and content drawn by JavaScriptScripts run in the preview before the capture.
No browser toolbar, cursor or zoom in the imageOnly the page is rendered.
Images and fonts hosted on other sitesIncluded when that site allows cross-origin requests; otherwise left blank.