ImageCompressor.si

Menu

Get Pro

Appearance

Language

PrivacyTermsRefunds

HTML to PNG

A PNG of your HTML with sharp text and a see-through background if you want one.

Paste HTML and CSS, or open an .html file. The picture is drawn as you type.

Open the HTML editor
  • Private by defaultDeleted within an hour
  • Super FastProcess in seconds
  • No Sign-upStart instantly

PNG is the right output for a drawing made of text, lines and flat colour. Nothing is lost when the file is saved, edges stay clean, and an area with no background can stay empty so that the picture sits on any colour. This page turns HTML and CSS into exactly that kind of file.

Typical uses are badges, stickers, buttons, email signatures, status cards, diagrams written in SVG, and interface mockups that go into a slide or a document. Write the markup once, change a word or a colour, and draw the picture again in a second instead of opening a design program.

The picture is made by a browser engine on our server, so the layout matches what you see in Chrome. Scripts are switched off and the page cannot fetch anything from the internet, which is what lets us run pages from strangers safely. Pictures and fonts have to be inside the page.

Keeping the background clear

Switch on the transparent background and every area that your page does not paint stays clear in the PNG. Watch the body and html elements: a background colour set on either one is painted, so remove it if the picture should be see-through.

The preview shows a chequered pattern behind the picture so you can tell clear areas from white ones. Shadows are drawn with partial transparency, so a soft shadow lands on whatever colour you place the file over.

Crisp at any density

Screens with a high pixel density need more pixels for the same size on the glass. Set the resolution to 2x or 3x and the layout stays as written while the picture gets two or three times as many pixels in each direction.

Doubling the resolution makes the file about three or four times larger, because there are four times the pixels. If the file gets too heavy for its use, drop back to 1x or send the PNG through our compressor afterwards.

Getting the size right

Set the width first, since it decides how the page wraps. Then set the height to the area you want. For a badge or a button, measure the element and use its size, then trim any spare margin in your markup.

Round the numbers where you can. A badge 240 pixels wide at 2x is a file 480 pixels wide, which is plenty for most documents. Only go to 3x when the picture will be printed or shown very large.

Frequently asked questions

Why is my background white when I asked for clear?

Something in the page paints it. Look for a background on the body or html element, or a full width container with a colour. Remove that rule and draw again.

Is the text really sharp?

Text is drawn from font outlines at the final size, not enlarged afterwards, so it stays crisp at 2x and 3x. Choose the highest resolution you need for print.

Can I embed my logo?

Yes, as a data address. Convert the logo to base64 and put it in the src of an image tag, or paste an inline SVG straight into the page.

Are web fonts supported?

A font has to travel inside the page, written as a data address in a font face rule. Without one, the page uses the fonts installed on our machine, such as Liberation and DejaVu.

What happens to my code afterwards?

It is deleted as soon as the picture is made. Only a result you ask a link for is kept, and for at most one hour.

Can I make a PNG from an SVG?

Yes. Put the SVG markup inside the page, size it with CSS, and draw it. You get a PNG at any resolution you choose, which is handy when a program accepts only raster pictures.

Related tools