HTML zu Bild: HTML in PNG oder JPG umwandeln

Füge HTML mit CSS ein, wähl eine Größe und lade ein PNG oder JPG herunter. Die Seite wird in deinem Browser gerendert, private Designs bleiben also privat.

<div class="card">
  <div class="brand">devnotes.blog</div>
  <h1>Fünf CSS-Grid-Layouts zum direkten Übernehmen</h1>
  <p>Holy Grail, Sidebar, Karten, fast Masonry und ein Artikel in voller Breite, jeweils mit Code.</p>
  <div class="meta"><span class="dot"></span> 8 Min. Lesezeit &middot; 23. Sep. 2026</div>
</div>

Größe

FormatSkalierung

Ergebnis

Hier erscheint dein Bild.

So wandelst du HTML in ein Bild um

Füge dein HTML und CSS in den Editor ein. Ein komplettes Dokument funktioniert genauso wie ein Fragment mit einem <style>-Block.
Wähl eine Größe. Open Graph (1200 x 630) nutzen Facebook, LinkedIn, X und Slack für Link-Vorschauen, Ganze Seite erfasst die komplette Höhe bei 1280 Pixeln Breite.
Nimm PNG für Text und flächige Farben, JPG für Fotos, klick dann auf In Bild umwandeln und auf Herunterladen.

Das HTML wird exakt in der gewählten Breite gesetzt, Media Queries verhalten sich also wie in einem Fenster dieser Größe. Bei fester Höhe wird alles unterhalb des Rands abgeschnitten.

Beispiele

Social Cards für einen Blog. Das Beispiel oben ist eine Karte mit 1200 x 630, in reinem CSS geschrieben. Titel ändern, umwandeln und das PNG als og:image des Beitrags hochladen.
Ein Bild einer E-Mail oder einer Quittung. Füge das HTML einer Transaktions-Mail ein und nutze Ganze Seite, um ein langes PNG für die Dokumentation oder ein Support-Ticket zu bekommen.
Eine Tailwind-Komponente für eine Folie. Bind das Tailwind-CDN-Skript ein, wähl HD-Folie (1280 x 720) und Skalierung 2x und zieh das PNG in deine Präsentation.

Fragen zu HTML zu Bild

Wird mein HTML an einen Server gesendet?

Nein. Das HTML wird in einem Sandbox-Frame in diesem Tab gerendert und dort mit der Open-Source-Bibliothek html-to-image in ein Bild umgewandelt. Nichts wird hochgeladen.

Warum fehlt meine Webschrift oder mein Bild im PNG?

Der Renderer muss jede Schrift und jedes Bild herunterladen, um sie einzubetten. Dateien, die ohne CORS-Header ausgeliefert werden, kann eine Sandbox-Seite nicht lesen, sie werden übersprungen. Google Fonts und Bild-Hosts mit CORS funktionieren (getestet haben wir Google Fonts, das Tailwind-CDN und Bilder von placehold.co), Bilder von Websites, die Cross-Origin-Zugriffe blockieren, nicht.

Kann ich Tailwind CSS verwenden?

Ja. Füg <script src="https://cdn.tailwindcss.com"></script> in dein HTML ein. Der Renderer wartet, bis die Seite fertig aufgebaut ist, bevor er das Bild macht, die Tailwind-Klassen sind also angewendet.

Was macht Skalierung 2x?

Es rendert in jede Richtung doppelt so viele Pixel (eine Karte mit 1200 x 630 wird zu 2400 x 1260), damit Text auf hochauflösenden Displays scharf bleibt. Das Layout ändert sich nicht.

Gibt es eine Größenbegrenzung?

Jede Seite ist nach der Skalierung auf 4096 Pixel begrenzt, weil größere Canvas-Flächen in mehreren mobilen Browsern scheitern.