DE

HTML in Bild umwandeln

Mit diesem Werkzeug können Sie HTML in ein Bild umwandeln: Code einfügen, Breite wählen, auf „Bild erstellen“ klicken und als PNG, JPG oder WebP herunterladen. Das Bild entsteht in Ihrem Browser – Ihr Code wird nicht hochgeladen, nicht gespeichert und nicht in die Adresszeile geschrieben.

Quelle: W3C SVG 2 – foreignObject (HTML-Inhalt in SVG einbetten). Stand: .

px
Breite des Bildes in CSS-Pixeln (50–4.000)
px
0 = automatisch nach Inhalt
px
Abstand zwischen Inhalt und Bildrand
Meine ToolboxIhre Eingaben werden nur in diesem Browser gespeichert.

HTML mit Inline-Stilen oder einem <style>-Block. Bilder nur als Base64 (data:image/…), Schriften nur aus dem System. Skripte und externe Adressen werden entfernt.

Ihr Text bleibt in Ihrem Browser – er wird nicht gesendet, nicht gespeichert und nicht in die Adresszeile geschrieben.

Ergebnis

Ausgabe
Bild 600 px breit, 2× Auflösung → 1.200 px

So wird gerechnet

So wird HTML zum Bild

Der Browser zeichnet Ihren HTML-Code als Grafik: Er wird zuerst bereinigt, dann als SVG mit eingebettetem HTML (foreignObject) gerendert und auf eine Zeichenfläche (Canvas) gemalt, die als PNG, JPG oder WebP gespeichert wird. Das funktioniert für Karten, Zitate, Tabellen, Rechnungsausschnitte, E-Mail-Bausteine oder Vorschaubilder für Social Media – alles, was sich mit HTML und CSS gestalten lässt.

Was unterstützt wird

Was nicht geht

Skripte laufen nicht, Bilder, Schriften und Stilblätter von anderen Adressen werden nicht geladen, und Animationen, Hover-Effekte, iframe, canvas und video ergeben kein Bild. Solche Teile werden beim Bereinigen entfernt; ein Hinweis unter dem Ergebnis sagt es Ihnen. Die Darstellung kann sich leicht von einer echten Seite unterscheiden, weil der Browser hier nur den Ausschnitt ohne Rest der Seite zeichnet.

Größe, Schärfe und Format

Datenschutz und Sicherheit

Ihr Code wird nur in Ihrem Browser verarbeitet und nirgends gespeichert. Skripte, Ereignis-Attribute wie onclick und externe Adressen werden vor dem Zeichnen entfernt. Wer stattdessen Text auf ein vorhandenes Foto setzen will, nimmt Text auf Foto schreiben.

Häufige Fragen

Wie wandle ich HTML in ein Bild um?

HTML-Code einfügen, Breite und Auflösung wählen und „Bild erstellen“ klicken. Danach lässt sich das Bild als PNG, JPG oder WebP herunterladen.

Warum werden meine Bilder nicht angezeigt?

Bilder von anderen Adressen (https://…) werden aus Sicherheitsgründen nicht geladen. Betten Sie sie als Base64-Adresse (data:image/…) ein oder verwenden Sie Inline-SVG.

Wird mein Code hochgeladen?

Nein. Der Code wird in Ihrem Browser gelesen und dort in ein Bild gezeichnet. Er wird weder gesendet noch gespeichert.

Wie bekomme ich einen transparenten Hintergrund?

Hintergrund „Transparent“ und das Format PNG oder WebP wählen. JPG kennt keine Transparenz und erhält immer einen weißen Hintergrund.

Warum ist das Bild unscharf?

Stellen Sie die Auflösung auf 2× oder 3×. Das Bild hat dann doppelt bzw. dreimal so viele Pixel bei gleicher Darstellungsgröße.

Funktionieren Google Fonts?

Nein, nachgeladene Web-Schriften werden nicht geladen. Verwenden Sie Systemschriften wie Arial, Georgia oder Verdana oder Schriften, die auf Ihrem Gerät installiert sind.

Quellen und Rechtsgrundlagen

Stand: · So prüfen wir

Passende Werkzeuge