HTML-zu-PNG-Konverter
Wandeln Sie HTML-Code in ein herunterladbares PNG-Bild um. Fügen Sie Markup ein oder laden Sie eine Datei hoch, sehen Sie eine Vorschau und exportieren Sie sofort einen scharfen Screenshot – alles in Ihrem Browser.
100% Client-seitige Verarbeitung
Ihr HTML wird vollständig in Ihrem Browser gerendert und konvertiert. Es wird nichts auf einen Server hochgeladen.
Vorschau
Aus Sicherheitsgründen sind <script>-Tags in der Vorschau und beim Export deaktiviert. Styling (CSS) und Bilder werden normal dargestellt.
Inhaltsverzeichnis
Was ist ein HTML-zu-PNG-Konverter?
Ein HTML-zu-PNG-Konverter nimmt HTML- und CSS-Markup und rendert es als ein einzelnes Rasterbild, bereit zum Herunterladen, Einbetten oder Teilen – wie ein Screenshot von Code, ohne einen echten Browser-Tab zu öffnen.
Er ist nützlich, um Karten, Banner, Social-Media-Vorschauen, Code-Ausschnitte oder jeden gestalteten Web-Inhalt in eine scharfe, portable Bilddatei zu verwandeln, ohne ein Design-Tool, eine Screenshot-Erweiterung oder einen serverseitigen Rendering-Dienst zu benötigen.
Wie es funktioniert
- HTML hinzufügen: HTML/CSS direkt einfügen oder eine .html-Datei hochladen.
- Vorschau ansehen: Das Tool rendert Ihr Markup live in einer isolierten Vorschau bei der gewählten Erfassungsbreite.
- Bildeinstellungen wählen: Erfassungsbreite, Auflösung (1x/2x/3x) und einen transparenten, weißen oder benutzerdefinierten Hintergrund auswählen.
- Umwandeln und herunterladen: Die Vorschau wird in voller Qualität gerastert und in ein herunterladbares PNG verpackt.
Funktionen
- HTML einfügen oder eine .html-Datei hochladen
- Live-Vorschau im WYSIWYG-Stil bei echter Erfassungsbreite
- Anpassbare Erfassungsbreite in Pixeln
- 1x-, 2x- und 3x-Auflösung für scharfe, retina-taugliche Bilder
- Transparenter, weißer oder benutzerdefinierter Hintergrund
- Ein einzelnes Bild in voller Höhe – ohne Seitenaufteilung
- 100% clientseitige Verarbeitung für Datenschutz
Best Practices
- Inline- oder eingebettetes CSS verwenden: Stile in ein <style>-Tag oder Inline-Attribute setzen, damit die Vorschau genau wie beabsichtigt gerendert wird.
- Data-URIs für wichtige Bilder verwenden: Cross-Origin-Bilder ohne CORS-Header werden möglicherweise nicht gerendert – kleine Bilder wenn möglich als Base64-Data-URIs einbetten.
- Eine zum Zielort passende Breite wählen: Die Erfassungsbreite an den Verwendungsort des Bildes anpassen (z. B. 1200px für Social-Karten, 600px für E-Mail-Grafiken).
- Transparenten Hintergrund für Überlagerungen verwenden: Transparent wählen, wenn das PNG auf einem anderen Hintergrund liegen soll, etwa einem UI-Mockup oder einem Logo.
- Zuerst mit dem Beispiel testen: Das Beispiel-HTML laden, um ein funktionierendes Beispiel zu sehen, bevor Sie eigenes Markup einfügen.
Fehlerbehebung
Bilder fehlen im PNG
Externe Bilder auf anderen Domains ohne passende CORS-Header können nicht erfasst werden. Verwenden Sie Bilder derselben Origin oder wandeln Sie sie in Base64-Data-URIs um.
Der Hintergrund ist nicht transparent
Stellen Sie sicher, dass vor dem Konvertieren unter Hintergrund „Transparent“ ausgewählt ist – die Optionen „Weiß“ und „Benutzerdefinierte Farbe“ füllen die Fläche mit einer Volltonfarbe.
Konvertierung schlägt fehl oder dauert zu lange
Sehr große Dokumente oder komplexes CSS (starke Verläufe, Filter) können langsam sein. Vereinfachen Sie das Markup oder verringern Sie die Erfassungsbreite.
Schriftarten sehen im PNG anders aus
Der Konverter verwendet die in Ihrem Browser verfügbaren Schriftarten. Webfonts, die über @font-face von externen Domains geladen werden, werden möglicherweise nicht immer erfasst – verwenden Sie Systemschriften für garantierte Konsistenz.
Häufige Anwendungsfälle
- Social-Media-Karten: Ein Open-Graph- oder Twitter-Karten-Layout in HTML gestalten und als teilbares PNG-Bild exportieren.
- Code- und Terminal-Screenshots: Einen Codeblock oder eine Terminalausgabe gestalten und ein sauberes Bild für Dokumentation oder Tweets exportieren.
- E-Mail-Grafiken: Ein gestaltetes HTML-Banner oder einen Button in ein statisches PNG für E-Mail-Clients umwandeln, die dynamisches HTML entfernen.
- UI-Mockups und Badges: Eine kleine gestaltete Komponente mit transparentem Hintergrund exportieren, um sie über andere Designs zu legen.
- Blog- und README-Bilder: Einen formatierten HTML-Ausschnitt in ein Bild umwandeln, das in Markdown-Dokumentation eingebettet werden kann.
Häufig gestellte Fragen
Ja. Ihr HTML wird vollständig in Ihrem Browser gerendert und konvertiert und niemals auf einen Server hochgeladen.
Nein. Script-Tags sind in der Vorschau und beim Export aus Sicherheitsgründen deaktiviert, sodass interaktive Skripte nicht ausgeführt werden.
Ja. Wählen Sie „Transparent“ unter Hintergrund, um ein PNG mit Alphakanal zu exportieren – ideal für Überlagerungen und Logos.
Verwenden Sie 1x für Standardbildschirme, 2x für Retina- oder hochauflösende Displays und 3x für das schärfstmögliche Ergebnis (größere Dateigröße).
Sie können ein vollständiges HTML-Dokument (mit <html>, <head> und <body>) oder ein kleineres HTML-Fragment einfügen. Beides wird unterstützt.
Bilder, die von anderen Domains ohne CORS-Unterstützung geladen werden, können aus Sicherheitsgründen des Browsers nicht erfasst werden. Verwenden Sie stattdessen Bilder derselben Origin oder Base64-Data-URIs.
Nein. Alles geschieht lokal in Ihrem Browser und das PNG wird direkt auf Ihr Gerät heruntergeladen.