Convert HTML Code to Image Online

To convert HTML to image, paste your HTML and CSS below or upload an .html file, pick PNG, JPG or WebP, set a width, and click Convert. ScreenshotAPI.net renders the code in a real Chromium browser so fonts, flexbox and scripts look exactly as they do on screen, then gives you the image to download for free with no signup.

Image format
Size in pixels

Free to use. No account required.

Step by step

How to Convert HTML to Image in 3 Steps

You do not need to host the page anywhere. The converter takes the raw code, renders it once, and hands back a PNG, JPG or WebP in a few seconds.

Each step maps to one API parameter, shown on the right, so the same settings work when you automate it later.

  1. Paste your HTML and CSS

    Drop the markup into the editor, or upload an .html file from your computer. Inline styles, a style block, web fonts and scripts are all allowed.

    custom_html

  2. Pick a format and size

    Choose PNG, JPG or WebP, set the width and height in pixels, and switch on retina for a 2x image or transparent for a PNG with no background.

    file_type · width · height · retina

  3. Convert and download

    Click Convert. ScreenshotAPI.net renders the HTML in a real Chromium browser and shows the finished image, ready to download or open in a new tab.

    output=image
HTML to PNG

HTML to PNG Converter with Transparent Backgrounds

PNG is the default for a reason. When you convert HTML to PNG the output is lossless, and it is the only format here that can carry an alpha channel. That makes it the right choice when the image has to sit on top of something else.

Lossless pixels
PNG keeps every pixel exactly as Chromium painted it, so thin borders, small text and sharp icons stay crisp. Pick it for badges, UI mockups and certificates.
Transparent background
Switch on Transparent and the converter sets omit_background. A plain white or solid page background is removed, and the PNG drops straight onto a slide, dark UI or video thumbnail.
Keep the edges clean
Give the element you want a solid shape and leave the body background unstyled. Gradients and photos behind the element cannot be cut out, so only the page colour is removed.
badge.pngomit_background=trueDropped onto a dark slideno white box around it
HTML to JPG

HTML to JPG Converter for Smaller Files

Convert HTML to JPG when the file has to be small and a solid background is fine. The quality slider decides how hard the image is compressed. At 90 the text edges stay clean. Drop towards 20 and blocks appear around letters and sharp edges, in exchange for a much smaller file.

card.jpgquality 90quality 200 · smallest file100 · most detailimage_quality
Compression
Lossy. JPG throws away fine detail that the eye rarely notices, which is why the file is smaller than the same render as PNG.
Quality control
The image_quality parameter runs from 0 to 100. Lower values compress harder and shrink the file. Higher values keep more detail. It applies to JPG only.
Transparency
Not supported. A JPG always has a solid background, so pick PNG when you need a cut-out.
JPG or JPEG
The same format. JPEG is the standard, .jpg is the three letter extension. Rename the file either way without changing a byte.
Rendering engine

Real Chromium Rendering, Not a Canvas Redraw

Most free HTML to image tools run html2canvas inside your browser tab. That library reads the styles and redraws the page onto a canvas, which is why the result is an approximation. This tool loads your HTML and CSS in a headless Chromium on ScreenshotAPI.net servers and takes a real screenshot of it.

Canvas redraw tools

html2canvas in the browser

  • Partial
    Web fontsFalls back to a system font when the font has not finished loading
  • Partial
    Flexbox and CSS gridRedrawn from computed styles, so gaps and wrapping often shift
  • Not supported
    JavaScriptScript tags are stripped before the redraw
  • Not supported
    Cross origin imagesBlocked by the browser unless the host sends CORS headers
  • Partial
    Shadows, filters, gradientsBox shadows and backdrop filters are frequently dropped
  • Not supported
    WebP and retina outputPNG only, at the device pixel ratio of the visitor

This converter

Headless Chromium on ScreenshotAPI.net

  • Supported
    Web fontsLoaded from your stylesheet link and painted exactly as Chrome paints them
  • Supported
    Flexbox and CSS gridLaid out by the browser engine itself, nothing is approximated
  • Supported
    JavaScriptInline scripts run before capture, so charts and counters render
  • Supported
    Cross origin imagesFetched like a normal page load from any https:// URL
  • Supported
    Shadows, filters, gradientsFull CSS paint pipeline, including blur and blend modes
  • Supported
    WebP and retina outputPNG, JPG or WebP at 1x or 2x, chosen by you

One thing to remember: pasted HTML has no domain behind it. Relative paths such as images/logo.png point nowhere, so use full https:// URLs or data URIs for images and stylesheets.

Render settings

Set Width, Retina Scale and Image Quality

An HTML to image generator is only useful if you control the size of what comes out. Five settings cover almost every job, and each one is a single API parameter under the hood.

1200 pxcustom_htmlPNG · JPG@2xautoquality 80transparent12345

  1. Width and height

    width · height

    The viewport the HTML is laid out in, in CSS pixels. Use 1200 × 630 for an Open Graph image, 600 wide for email, or any size up to 4000.

  2. Auto height

    full_page=true

    Ignore the height and capture everything from the top of the document to the bottom. Handy for receipts and long tables.

  3. Retina 2x

    retina=true

    Renders at double pixel density, so a 1200 wide layout comes back as a 2400 pixel image that stays sharp on high DPI screens and in print.

  4. Image quality

    image_quality

    A value from 0 to 100 for JPG output. PNG and WebP ignore it.

  5. Transparent PNG

    omit_background=true

    Removes a plain page background from the PNG output so the element can be placed on any surface.

Use Cases

What You Can Build From HTML Code to Image

Anything you can style with HTML and CSS can become an image. These are the jobs people run through the converter most.

Open Graph and social cards

Render a 1200 × 630 card from an HTML template for every blog post or product, with the title and author pulled in from your CMS.

Email banners

Email clients ignore most CSS. Build the header in HTML, convert it to a 600 pixel wide JPG, and drop the image into the template instead.

Invoices and receipts

Turn a styled HTML receipt into a PNG your customers can attach to an expense report, using auto height so nothing is cut off.

Certificates and badges

Design one certificate in HTML, swap in each name, and export a transparent PNG badge that sits cleanly on a dark profile page.

Charts and dashboards

Let a JavaScript chart library draw the graph, then capture it as an image for a Slack report or a PDF appendix.

Code and quote snippets

Convert HTML code blocks, pull quotes or testimonials into sharp images for social posts without a screenshot tool.

Do this via the API

HTML to Image API for Bulk and Automated Jobs

Generating thousands of social cards or receipts? Send the same HTML in a POST request to the ScreenshotAPI.net API and get the PNG back in one call, with no Puppeteer or Chromium to run yourself.

custom_html
Your HTML as a string. It overrides url, and inline CSS and JavaScript are applied. Use POST for long documents.
file_type
png, jpg or webp. Add image_quality from 0 to 100 for jpg.
width / height
Viewport size in pixels. Set full_page=true instead of height to capture the whole document.
retina / omit_background
retina=true renders at 2x. omit_background=true removes a plain background from PNG output.
Get a free API keyRead the docs
POSThttps://shot.screenshotapi.net/v3/screenshot
curl -X POST "https://shot.screenshotapi.net/v3/screenshot" \
  -H "Content-Type: application/json" \
  -d '{
    "token": "YOUR_API_KEY",
    "custom_html": "<div class='card'><h1>Convert HTML to an image</h1><p>in one request</p></div>",
    "file_type": "png",
    "width": 1200,
    "height": 630,
    "retina": true,
    "omit_background": false,
    "output": "image"
  }' \
  --output card.png
Which tool

HTML to Image vs URL Screenshot vs HTML to PDF

All three run on the same ScreenshotAPI.net rendering engine. The difference is what you start with and what you need back.

Need the whole scroll of a live page as one image? Try the full page screenshot tool. Want a PDF from a URL instead? Use the URL to PDF generator.

HTML to Image FAQ

Common questions about converting HTML to PNG, JPG and WebP, transparent backgrounds, and automating it with the ScreenshotAPI.net API.

Don't see your question here?

Browse all help articles