HTML to Image Converter
This HTML to image converter turns your code into a picture: paste the HTML, choose a width, click “Create image” and download a PNG, JPG or WebP. The image is made in your browser – your code is not uploaded, not stored and not added to the address bar.
Source: W3C SVG 2 – foreignObject (HTML-Inhalt in SVG einbetten). Updated: .
How it is calculated
How HTML becomes an image
Your browser draws the HTML code as a graphic: it is cleaned first, then rendered as an SVG with embedded HTML (foreignObject) and painted onto a canvas that is saved as PNG, JPG or WebP. That works for cards, quotes, tables, invoice snippets, email building blocks or social media preview images – anything you can design with HTML and CSS.
What is supported
- HTML and CSS: inline styles and a
<style>block, flexbox, grid, gradients, shadows, rounded corners, tables. - Images: only embedded as a Base64 address (
data:image/png;base64,…) or as inline SVG. Image to Base64 turns an image file into the right address. - Fonts: fonts installed on your device and the system font. Web fonts loaded from the internet (Google Fonts) are not fetched.
What does not work
Scripts do not run, images, fonts and stylesheets from other addresses are not loaded, and animations, hover effects, iframe, canvas and video do not produce a picture. Such parts are removed during cleaning; a note under the result tells you. The rendering can differ slightly from a real page because the browser draws only your snippet, not the rest of a page.
Size, sharpness and format
- Width and height: with a height of “0” the height follows the content.
- Resolution: 2× gives twice as many pixels and looks sharp on phones and retina screens. For very large images the resolution is limited automatically.
- Format: PNG for text and graphics with sharp edges and transparency, JPG for small files (always with a background), WebP as a modern compromise.
Privacy and security
Your code is processed only in your browser and stored nowhere. Scripts, event attributes such as onclick and external addresses are removed before drawing. If you want to put text on an existing photo instead, use add text to photo.
Frequently asked questions
How do I convert HTML to an image?
Paste the HTML code, choose width and resolution and click “Create image”. Then download the image as PNG, JPG or WebP.
Why are my images not showing?
Images from other addresses (https://…) are not loaded for security reasons. Embed them as a Base64 address (data:image/…) or use inline SVG.
Is my code uploaded?
No. The code is read in your browser and drawn into an image there. It is neither sent nor stored.
How do I get a transparent background?
Choose the background “Transparent” and the format PNG or WebP. JPG has no transparency and always gets a white background.
Why is the image blurry?
Set the resolution to 2× or 3×. The image then has twice or three times as many pixels at the same display size.
Do Google Fonts work?
No, web fonts loaded from the internet are not fetched. Use system fonts such as Arial, Georgia or Verdana, or fonts installed on your device.
Sources and legal basis
- W3C SVG 2 – foreignObject (HTML-Inhalt in SVG einbetten)
- W3C SVG 2 – SVG als Bild: keine Skripte, keine externen Ressourcen („secure static mode“)
- MDN – HTMLCanvasElement.toBlob() (PNG, JPEG, WebP; Qualitätsparameter)
As of: · Editorial policy
Related tools
- Add text to a photoAdd text to images with 8 fonts, outline, shadow or a background bar. Drag, rotate and save in full resolution – free, no sign-up, nothing uploaded.
- Image to Base64 ConverterConvert an image to Base64: copy a data URL, HTML img tag, CSS background, Markdown or JSON, resize first if needed – and decode Base64 back to an image.
- Markdown to HTML converter: preview, HTML code, downloadMarkdown to HTML converter with live preview: headings, lists, tables and code following CommonMark. Clean HTML code to copy, safe with no scripts. Free.
- Image SplitterFree image splitter: cut a picture into equal parts (halves, 3, 4, 9), fixed-size tiles or a poster printed across several Letter or A4 pages – in your browser.
- CSS minifier: minify, format and inline CSS into HTMLCSS minifier and formatter, plus a CSS inliner for HTML email: safe transformations, errors with line numbers, all in your browser with no upload. Free.
- QR Code Generator – free and permanentQR code generator for links, Wi-Fi, contacts (vCard), email, SMS or phone – add colors and a logo, download PNG or SVG. Never expires, no tracking, no sign-up.
- Merge and compress PDF files in one stepMerge and compress PDF files in one pass: order PDFs and photos, combine them, shrink the file and add page numbers. Runs in your browser, no upload.
- Paper weight calculatorPaper weight calculator from size and gsm: weight per sheet, stack and ream, gsm from a weighed stack, and how many sheets fit under 20 g. Free to use.
- Trim and compress video in one passTrim and compress video in one go: pick a section, bring it down to 8–50 MB and make a GIF from it if you like. Runs in your browser, no upload needed.