HTML in Bild umwandeln
Hier können Sie HTML in Bild umwandeln: Fügen Sie HTML und CSS ein und erhalten Sie ein PNG, so wie Ihr Code gerendert wird, mit der Breite, Höhe und Pixeldichte (1x bis 3x), die Sie wählen. Dieser HTML-in-PNG-Konverter ist zugleich ein HTML-zu-Bild-Tool: Lassen Sie den PNG-Hintergrund transparent, um das Bild über etwas anderes zu legen, oder speichern Sie eine JPG-Datei mit einer Qualität von 1 bis 100.
- Ein transparentes PNG bleibt nur dort transparent, wo Ihre Seite keinen eigenen Hintergrund setzt.
- JPG kennt keine Transparenz: Der Seitenhintergrund ist weiß, sofern Ihr HTML keine Farbe festlegt.
602 B von 256 KB im kostenlosen Web-Tool erlaubt.
Bestätigen Sie die Sicherheitsprüfung, um die Schaltfläche zu aktivieren.
Ergebnis
Ihr Bild erscheint hier.
Das kostenlose Web-Tool erfasst höchstens 2000px Höhe. Für höhere Erfassungen verwenden Sie die API.
Aufbewahrung: Ergebnisse der Web-Tools werden nach 10 Minuten gelöscht. API-Ergebnisse werden im kostenlosen Tarif 1 Tag aufbewahrt und bei Starter und Pro 7 Tage (bei Business und Scale 30 Tage). Ein Protokoll jedes Auftrags (Typ, Zeit, Status und Credits, nicht das, was Sie eingereicht haben) wird 30 Tage ohne Konto aufbewahrt oder, wenn Sie angemeldet sind, solange Ihr Konto besteht.
Kein Konto erforderlich
10 pro Minute und 50 pro Tag kostenlos.
Umwandlung mit einem echten Browser
Headless-Chromium (Chromium ohne Bedienoberfläche), dieselbe Engine wie die API.
Automatisch gelöscht
Ergebnisse des Web-Tools werden nach 10 Minuten entfernt.
Datenschutz: Was Sie einreichen, wird nur für diese Datei verwendet. Es wird gelöscht, sobald der Auftrag endet, auch aus dem Auftragsprotokoll, und das Ergebnis nach 10 Minuten. Siehe die Datenschutzerklärung.
So machen Sie es in Ihrem Code
Dieselbe Anfrage, aufgebaut aus der Eingabe und den Optionen oben. Erstellen Sie ein Konto, um einen API-Schlüssel zu erhalten.
curl -X POST https://api.aiipworld.com/v1/render \
-H "Authorization: Bearer $AIIPWORLD_API_KEY" \
-H "Content-Type: application/json" \
-d '{"html":"","output":"pdf","options":{}}'
# returns {"job_id": "...", "status": "queued"}; then poll:
curl https://api.aiipworld.com/v1/jobs/JOB_ID -H "Authorization: Bearer $AIIPWORLD_API_KEY"Stapel
Das Web-Tool verarbeitet 1 Dokument auf einmal. Die API nimmt eine Anfrage pro Dokument an, sodass Sie so viele per Skript senden können, wie Ihr Tarif erlaubt.
Mehr Kontrolle
Erfassung der gesamten Seite (full_page), Zuschneiden auf einen Bereich, Anfrage-Header und ein benutzerdefinierter User-Agent sind API-Optionen. Siehe Dokumentation.
Aufbewahrung
Ergebnisse der Web-Tools werden 10 Minuten aufbewahrt; kostenlose API-Ergebnisse 1 Tag; Ergebnisse bei Starter und Pro 7 Tage; Business und Scale 30 Tage. Das Web-Tool erlaubt 10 Umwandlungen pro Minute und 50 pro Tag und Besucher.
In einem Satz
Ein kostenloses Online-Tool, das eingefügtes HTML und CSS mit der von Ihnen gewählten Breite, Höhe und Pixeldichte in ein PNG- oder JPEG-Bild umwandelt.
Die wichtigsten Fakten
- Eingabe: HTML und CSS, bis zu 256 KB.
- Ausgabe: PNG oder JPEG, Pixeldichte 1x, 2x oder 3x; ein transparenter Hintergrund funktioniert nur bei PNG.
- Höhenlimit des kostenlosen Tools: 2000 px.
- Ohne Konto kostenlos: bis zu 10 Umwandlungen pro Minute und 50 pro Tag und Besucher, ohne Wasserzeichen. Angemeldet kostet jedes Rendering 1 Credit (100 kostenlose Credits jeden Monat).
- Dateien werden automatisch gelöscht: 10 Minuten nach der Umwandlung ohne Konto, 1 Tag mit einem kostenlosen Konto.
- Entwickler können dasselbe Rendering mit POST https://api.aiipworld.com/v1/render und einem API-Schlüssel ausführen (siehe die Seite Screenshot-API).
Quellen
- Chrome DevTools Protocol: Page.captureScreenshot
- W3C: Portable Network Graphics (PNG) Specification
- JPEG committee: JPEG (ISO/IEC 10918)
Zuletzt geprüft:
So funktioniert es
- Fügen Sie Ihr HTML und CSS in den Editor ein.
- Legen Sie Breite und Höhe des Bildbereichs in Pixeln fest.
- Wählen Sie PNG oder JPG. Bei PNG können Sie den Hintergrund transparent lassen; bei JPG können Sie die Qualität festlegen.
- Klicken Sie auf „Bild erstellen“ und laden Sie die Datei herunter.
Beispielergebnis
HTML in Bild umwandeln und HTML in PNG: So funktioniert es
Die Umwandlung läuft auf unseren Servern, nicht in Ihrem Browser. Jede Umwandlung nutzt Headless-Chromium (Chromium ohne Bedienoberfläche) in einem neuen Browser-Kontext innerhalb eines ressourcenbegrenzten Worker-Containers, mit einer festen Zeitgrenze.
Bildgröße und Pixeldichte
Die Bildgröße ergibt sich aus der Breite und Höhe, die Sie festlegen, multipliziert mit der Pixeldichte (1x, 2x oder 3x). Ein Bereich von 640 x 340 px ergibt bei 2x ein Bild mit 1280 x 680 px.
Transparenter Hintergrund
PNG behält die Transparenz dort, wo Ihre Seite keinen Hintergrund setzt. Wenn Sie auf html oder body eine Hintergrundfarbe festlegen, ersetzt diese Farbe die Transparenz. JPEG kennt keine Transparenz.
PNG oder JPEG
PNG eignet sich für Text, scharfe Kanten und transparente Bilder. Wenn Sie stattdessen eine JPG-Datei möchten, etwa für ein Verlaufsbanner oder eine kleine Datei, behandelt die Seite HTML in JPG Qualität, Dateigröße und Hintergründe. WebP wird hier nicht unterstützt; die API gibt einen Fehler zurück, wenn Sie es anfordern. Das Tool PNG in WebP umwandeln konvertiert ein vorhandenes PNG.
Schriftarten, Bilder und Skripte in Ihrem HTML
Schriftarten auf Ihrem eigenen Gerät stehen auf dem Render-Server nicht zur Verfügung. Laden Sie andere Schriftarten mit @font-face von einer öffentlichen URL oder als Data-URL.
Bilder und Stylesheets können nur von öffentlichen http- oder https-Adressen geladen werden. JavaScript läuft standardmäßig.
Wofür Menschen HTML in Bild nutzen
Man nutzt es für Social-Cards, Banner und Code-Ausschnitte, die als Bilder angezeigt werden.
Umwandlung per Code
Senden Sie eine POST-Anfrage an /v1/render mit Ihrem HTML und output auf png oder jpeg. Authentifizieren Sie sich mit Ihrem API-Schlüssel als Bearer-Token. Die API antwortet mit 202 und einer job_id.
Fragen Sie GET /v1/jobs/:id ab, bis der Status succeeded, failed oder timeout lautet, und laden Sie dann das Bild von download_url herunter. Dieser Link ist nur kurz gültig. Credits für fehlgeschlagene Aufträge und Aufträge mit Zeitüberschreitung werden zurückgegeben.
HTML-Code in ein Bild umwandeln
Wenn Sie ein Bild von einem Markup-Block möchten, funktioniert dieses Tool als HTML-Code-zu-Bild-Tool. Fügen Sie das HTML und das CSS ein, das es gestaltet, legen Sie Breite und Höhe fest und laden Sie das Bild herunter, sobald es fertig ist.
Das Bild zeigt, was der Browser aus Ihrem Code gezeichnet hat, nicht den Code selbst. Fehlt ein Stil oder ist eine Schriftart auf dem Render-Server nicht vorhanden, zeigt das Bild das. Prüfen Sie das Ergebnis, bevor Sie es in einem Beitrag oder Dokument verwenden.
Dasselbe HTML für Banner und Ausschnitte nutzen
Viele möchten HTML als Bild für ein Banner, eine Karte oder einen Code-Ausschnitt in einem Artikel. Stellen Sie die Größe auf die Box ein, die Sie auf der Seite brauchen, und wählen Sie dann PNG, wenn das Bild Text oder scharfe Kanten hat.
Wenn Sie für ein fotoähnliches Banner eine JPG-Datei möchten, funktioniert dasselbe Formular: Wählen Sie JPG (JPEG) in der Formatliste. Die Seite HTML in JPG erklärt Qualität, Dateigröße und Hintergründe im Detail.
HTML in PNG online umwandeln
Um HTML online in PNG umzuwandeln, fügen Sie Ihr HTML und CSS ein, legen Breite und Höhe fest, wählen PNG und klicken auf „Bild erstellen“. Dieser HTML-in-PNG-Konverter zeichnet die Seite in Headless-Chromium, sodass Sie HTML ohne Browser-Erweiterung oder Kommandozeilen-Tool in PNG umwandeln können.
Ein so erstelltes PNG behält die Transparenz dort, wo Ihre Seite keinen Hintergrund setzt. Das macht es nützlich für Abzeichen, Sticker und Karten, die über anderen Gestaltungen liegen.
Eine ganze HTML-Seite oder ein Element als Bild
Eine HTML-Seite in ein Bild umzuwandeln funktioniert am besten, wenn Sie ein vollständiges Dokument einfügen, einschließlich des Style-Blocks. Das Tool zeichnet das HTML, das Sie einfügen, nicht eine Live-Webseite. Um eine Seite über ihre Adresse zu erfassen, nutzen Sie das Tool Website-Screenshot.
Um ein einzelnes HTML-Element in ein Bild umzuwandeln, fügen Sie nur dieses Element und sein CSS ein und stellen Breite und Höhe passend ein. Die API hat außerdem eine Option clip, die ein Rechteck (x, y, width, height) ausschneidet.
Fragen
Wie groß wird das Bild?
Breite mal Höhe in Pixeln, multipliziert mit der Pixeldichte. Bei 2x ergibt ein Bereich von 640 x 340 px ein Bild mit 1280 x 680 px. Das kostenlose Tool erlaubt Höhen bis 2000 px und Breiten von 100 bis 4000 px.
Wie erhalte ich einen transparenten Hintergrund?
Wählen Sie PNG und lassen Sie die Option „Transparenter Hintergrund“ aktiviert. Ihre Seite darf auf html oder body keinen eigenen Hintergrund setzen. JPEG kennt keine Transparenz.
Kann das HTML externe Bilder und Schriftarten laden?
Öffentliche http- und https-Adressen können beim Rendern geladen werden. Private und lokale Adressen sind absichtlich gesperrt. Data-URLs funktionieren ohne jede Netzwerkanfrage.
Wird JavaScript ausgeführt?
Ja. Das Bild wird erfasst, nachdem die Seite geladen wurde. Die API hat Warteoptionen für Seiten, die später fertig werden.
Kann ich nur einen Teil der Seite erfassen?
Die API hat eine Option clip, die ein Rechteck (x, y, width, height) ausschneidet. Das kostenlose Tool erfasst den gesamten Fensterbereich, den Sie festlegen.
Wird WebP unterstützt?
Noch nicht. Die Ausgabe ist PNG oder JPEG.
Wie lange wird das Bild aufbewahrt?
Ergebnisse des Web-Tools werden nach 10 Minuten gelöscht. Laden Sie das Bild vorher herunter.
Wie wandle ich HTML in PNG um?
Fügen Sie Ihr HTML und CSS in den Editor ein, legen Sie Breite und Höhe fest und wählen Sie PNG. Klicken Sie auf „Bild erstellen“ und laden Sie dann die Datei herunter. Ergebnisse des Web-Tools werden nach 10 Minuten gelöscht.
Kann ich eine HTML-Datei umwandeln?
Das Tool nimmt eingefügtes HTML und CSS entgegen, keinen Datei-Upload. Öffnen Sie Ihre Datei in einem Texteditor, kopieren Sie den Inhalt und fügen Sie ihn ein.
Warum ist mein Bild unscharf?
Das Bild wird mit der Pixeldichte erfasst, die Sie wählen. Bei 1x wird jedes CSS-Pixel zu einem Bildpixel, was auf hochauflösenden Bildschirmen weich wirken kann. Wählen Sie 2x oder 3x für ein schärferes Bild.
Kann ich mit diesem Tool eine Live-Webseite in ein Bild umwandeln?
Nein. Das Tool nimmt HTML und CSS entgegen, die Sie einfügen. Um eine Webseite über ihre Adresse zu erfassen, nutzen Sie das Tool Website-Screenshot. Während das Bild erstellt wird, können nur öffentliche http- oder https-Adressen geladen werden, daher erscheinen private oder lokale Adressen nicht im Bild.
Kann ich ein einzelnes HTML-Element in ein Bild umwandeln?
Ja. Fügen Sie nur dieses Element und das CSS ein, das es gestaltet, und legen Sie Breite und Höhe des Bildbereichs passend fest. Mit der API können Sie stattdessen die ganze Seite rendern und mit der Option clip ein Rechteck ausschneiden.
Erscheinen chinesischer, japanischer und koreanischer Text sowie Emojis im Bild?
Ja, in unserem Test. Am 2026-10-11 haben wir ein PNG einer Seite mit vereinfachtem und traditionellem Chinesisch, Japanisch, Koreanisch und Emojis gerendert. Jedes Zeichen erschien als Text oder farbiges Emoji, nicht als leeres Kästchen. Der Server zeichnet sie mit Noto Sans CJK und Noto Color Emoji. Für eine eigene Schriftart laden Sie sie mit @font-face von einer öffentlichen URL oder als Data-URL.
Brauchen Sie das in Ihrer App oder in großen Mengen?
Dieses Tool läuft auf der Render-API, deshalb ist dasselbe Bild aus Ihrem Code eine HTTP-Anfrage. Ein kostenloses Konto enthält 100 Credits pro Monat.