---
title: "HTML to Image Converter: Free HTML to PNG, JPG, WebP"
slug: "/tools/html-to-image"
description: "Convert HTML to image free. Paste HTML and CSS, render it in real Chromium and download a PNG, JPG or WebP. No signup, plus an API for bulk HTML to PNG jobs."
---

# 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.

## 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.  01
    
    ### 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.  02
    
    ### 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.  03
    
    ### 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 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.

1

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.

2

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.

3

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.

## 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.

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.

## 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.

VS

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.

## 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.

1.  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.  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.  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.  4
    
    ### Image quality
    
    `image_quality`
    
    A value from 0 to 100 for JPG output. PNG and WebP ignore it.
    
5.  5
    
    ### Transparent PNG
    
    `omit_background=true`
    
    Removes a plain page background from the PNG output so the element can be placed on any surface.
    

## 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.

## 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.

## 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.

HTML to ImageURL ScreenshotHTML to PDF

### HTML to Image

You start with

HTML code or .html file

You get

PNG, JPG or WebP

You wrote the markup yourself and it is not hosted anywhere. Paste it here and get a pixel image. This is the page you are on.

[Use this converter](https://www.screenshotapi.net/tools/html-to-image#playground)

### URL to Screenshot

You start with

A live web address

You get

PNG, JPG or WebP

The page already exists online and you want a capture of it, including a full page scroll. Converting HTML to screenshot from a URL is a different input, same engine.

[Screenshot a URL](https://www.screenshotapi.net/url-to-screenshot)

### HTML to PDF

You start with

HTML code or .html file

You get

Paginated PDF

Same raw HTML, but you need a document with real pages, selectable text and a paper size such as A4 or Letter. Pick this for invoices and reports.

[Convert HTML to PDF](https://www.screenshotapi.net/tools/html-to-pdf)

Need the whole scroll of a live page as one image? Try the [full page screenshot tool](https://www.screenshotapi.net/tools/full-page-screenshot). Want a PDF from a URL instead? Use the [URL to PDF generator](https://www.screenshotapi.net/tools/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](https://www.screenshotapi.net/help)