# HTML in JPG umwandeln: Konverter

> Ein kostenloses Online-Tool, das eingefügtes HTML und CSS mit der von Ihnen gewählten Breite, Höhe, Pixeldichte und Qualität in ein JPG-(JPEG-)Bild umwandelt, gezeichnet von Headless-Chromium (Chromium ohne Bedienoberfläche).

Mit diesem Tool können Sie HTML in JPG umwandeln und HTML sowie CSS in ein JPEG-Bild verwandeln. Fügen Sie Ihren Code ein, legen Sie Breite, Höhe und Qualität fest und laden Sie die Datei herunter. Das Tool ist kostenlos und benötigt keine Anmeldung; bei anonymer Nutzung wird zuerst eine Sicherheitsprüfung verlangt. Chromium zeichnet die Seite auf unseren Servern, sodass Sie sehen, was ein Browser darstellt.

## Die wichtigsten Fakten

- Eingabe: HTML und CSS im Editor, bis zu 256 KB; Breite 100 bis 4000 px, Höhe bis zu 2000 px im kostenlosen Tool, Pixeldichte 1x, 2x oder 3x.
- Ausgabe: ein JPG (JPEG) mit einer Qualitätseinstellung von 1 bis 100, Standard 80; JPEG hat keine Transparenz, daher sind Bereiche, die die Seite nicht füllt, weiß.
- In unserem Test war eine flache Karte bei Qualität 80 etwa gleich groß wie als PNG (41 KB als JPG und 42 KB als PNG), während ein Banner mit Verlauf, 1200 x 630 px, bei Qualität 80 als JPG 27 KB und als PNG 493 KB groß war.
- Der API-Aufruf lautet POST https://api.aiipworld.com/v1/render mit output jpeg und options.quality; die PNG-Version dieses Tools ist die Seite HTML in PNG.
- 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](https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-captureScreenshot)
- [JPEG committee: JPEG (ISO/IEC 10918)](https://jpeg.org/jpeg/)

Zuletzt geprüft: 2026-10-15

## So funktioniert es

1. Fügen Sie Ihr HTML und CSS in den Editor ein. JPG ist bereits ausgewählt, wenn die Seite geöffnet wird.
2. Legen Sie Breite und Höhe des Bildbereichs in Pixeln fest.
3. Wählen Sie die Pixeldichte: 1x, 2x oder 3x.
4. Legen Sie die JPG-Qualität von 1 bis 100 fest. Der Standardwert ist 80.
5. Klicken Sie auf „Bild erstellen“ und laden Sie die Datei herunter.

## HTML in JPG umwandeln: so geht es

Um HTML in JPG umzuwandeln, fügen Sie Ihr HTML und CSS in den Editor oben ein. JPG ist bereits ausgewählt, wenn diese Seite geöffnet wird. Legen Sie Breite und Höhe des Bildbereichs fest, klicken Sie dann auf „Bild erstellen“ und laden Sie die Datei herunter. Das Tool zeichnet die Seite in Headless-Chromium und speichert das Ergebnis als JPEG.

Die Schritte sind kurz, doch die Größeneinstellungen sind am wichtigsten. Das Bild entspricht dem eingestellten Bereich, multipliziert mit der Pixeldichte. Fehlen Teile Ihres Designs, vergrößern Sie den Bereich oder prüfen Sie, ob Ihr CSS hineinpasst. Prüfen Sie die Datei in voller Größe, bevor Sie sie verwenden.

- Fügen Sie vollständiges HTML ein, einschließlich eines style-Blocks oder eines Links auf ein öffentliches Stylesheet.
- Öffnen Sie die heruntergeladene Datei in voller Größe, um das Layout zu prüfen.

## Was der HTML-in-JPG-Konverter leistet

Der Konverter nimmt das eingefügte HTML und CSS und zeichnet es mit Headless-Chromium auf unseren Render-Servern. Jede Umwandlung läuft in einem frischen Browser-Kontext innerhalb eines ressourcenbegrenzten Containers mit einer festen Zeitgrenze. Das Ergebnis wird als JPEG-Datei gespeichert, die Sie herunterladen können.

Es ist dieselbe Engine wie auf der Seite HTML in PNG, daher stimmen Layout und Schriften zwischen beiden überein. Nur das Ausgabeformat unterscheidet sich. Das Tool arbeitet mit eingefügtem Code, nicht mit einer Live-Website. JavaScript wird standardmäßig ausgeführt, Bilder und Stylesheets werden nur von öffentlichen http- oder https-Adressen geladen.

- Eingefügtes HTML und CSS: unterstützt.
- Eine Live-Website über ihre Adresse: verwenden Sie stattdessen das Tool für Website-Screenshots.

## JPG-Qualität und Dateigröße

Die JPG-Qualität bestimmt, wie viele Details der Encoder behält. Der Bereich reicht von 1 bis 100, der Standard ist 80. Niedrigere Werte ergeben kleinere Dateien mit sichtbareren Schäden. Höhere Werte behalten mehr Details und erzeugen größere Dateien. Um die Dateigröße beim HTML-in-JPG-Umwandeln zu ändern, passen Sie die Qualitätseinstellung vor jeder Umwandlung an.

Wir haben eine flache Testkarte gemessen, einen Bereich von 640 x 340 px bei 2x (1280 x 680 px) mit flachen Farben und Text. Die Dateigröße betrug 23,5 KB bei Qualität 30, 29,0 KB bei 50, 41,0 KB bei 80, 65,2 KB bei 95 und 88,8 KB bei 100. Ihre Werte werden mit Ihrem Design abweichen, testen Sie daher zwei oder drei Einstellungen mit Ihrem eigenen HTML.

- Qualität 80 ist der Standard und für die meisten Designs ein sinnvoller Ausgangspunkt.
- Qualität 95 oder höher ergibt größere Dateien, wenn Details wichtiger sind als die Größe.

## JPG oder PNG: welches wählen

Das passende Format hängt vom Bild ab. JPEG ist verlustbehaftet und hat keinen Alphakanal, daher ist es für Fotos oft eine gute Wahl. PNG ist verlustfrei und unterstützt volle Transparenz. Der Bildformat-Leitfaden von MDN weist darauf hin, dass verlustbehaftete Kompression bei Inhalten, die Schärfe brauchen, etwa Diagrammen oder Schaubildern, unbefriedigende Ergebnisse liefern kann.

Unsere beiden Testfälle zeigen den Unterschied. Eine flache Karte bei 2x war 41,6 KB als PNG und 41,0 KB als JPEG bei Qualität 80, die Größen waren also etwa gleich. Ein Banner von 1200 x 630 px aus weichen Verläufen war 493 KB als PNG, aber 26,8 KB als JPEG bei Qualität 80 und 14,3 KB bei Qualität 50. Verläufe brachten in unseren Tests die größte Einsparung.

Wandeln Sie dasselbe HTML auf beide Arten um und vergleichen Sie die Dateien. Wenn Ihr Bild transparente Ränder oder scharfe Linien braucht, verwenden Sie stattdessen die Seite HTML in PNG. Unsere Messungen stammen von unserer lokalen Test-Engine vom 2026-10-11 und sind als Beispiele zu verstehen, nicht als Regel.

## JPG und Hintergründe

JPEG hat keine Transparenz. Wo Ihre Seite keinen Hintergrund setzt, zeigt das JPG Weiß. Abgerundete Ecken und transparente Ränder werden in einem JPG ebenfalls weiß.

Um eine andere Farbe zu verwenden, setzen Sie in Ihrem CSS einen Hintergrund am Element html oder body, zum Beispiel background: #f5f1e8. Wenden Sie die Farbe auf ein Element an, das das ganze Bild abdeckt, damit der gesamte Bereich gefüllt ist. Wenn Ihr Bild durchsichtige Ränder behalten muss, verwenden Sie stattdessen PNG.

- Setzen Sie den Hintergrund auf html oder body, um das ganze Bild zu füllen.
- Verwenden Sie PNG, wenn Sie Transparenz brauchen.

## Bildgröße und Pixeldichte

Die Bildgröße in Pixeln ergibt sich aus Breite mal Höhe mal Pixeldichte. Ein Bereich von 640 x 340 px bei 2x ergibt 1280 x 680 px. Die Dichte kann 1x, 2x oder 3x betragen. Eine höhere Dichte zeichnet mehr Pixel für denselben Bereich, was die Datei größer macht.

Das kostenlose Tool akzeptiert Breiten von 100 bis 4000 px und Höhen von 100 bis 2000 px. Legen Sie den Bereich auf die Größe fest, die Sie für den späteren Einsatz brauchen, etwa eine Social-Media-Karte oder einen E-Mail-Header. Eine Änderung der Dichte ändert das Layout nicht, sondern nur die Anzahl der gezeichneten Pixel.

- Legen Sie den Bereich auf die genaue Größe fest, die Sie veröffentlichen.
- Verwenden Sie 2x, wenn Sie mehr Pixel für Text und feine Details wünschen.

## HTML in JPEG online: Social Cards, Banner und E-Mail-Bilder

Diese Seite nutzen Menschen für Social Cards, Web-Banner und Bilder für E-Mails. Hintergründe mit Verlauf und fotoähnliche Banner lassen sich als JPEG gut komprimieren, wie die Messungen oben zeigen. Wenn Sie nach einem Konverter von HTML in JPEG gesucht haben, ist dies einer. Zum Umwandeln von HTML in JPEG verwenden Sie dasselbe Formular, denn nur der API-Wert wird jpeg geschrieben. Scharfer Text und Diagramme brauchen unter Umständen eine höhere Qualitätseinstellung oder PNG.

Das Tool kennt die Regeln keiner Plattform. Es zeichnet, was Ihr HTML zeigt, und gibt Ihnen ein JPEG in der gewählten Größe. Prüfen Sie Abmessungen und Dateigröße gegen die Vorgaben der Website oder des E-Mail-Programms, bevor Sie hochladen. Zur Nutzung dieses Online-Tools für HTML in JPG installieren Sie nichts.

- Social Card: große Überschrift auf einem Verlaufshintergrund.
- Banner: legen Sie die genaue Pixelgröße fest, die Sie brauchen.
- E-Mail-Bild: senken Sie die Qualität, um die Dateigröße zu verringern, und prüfen Sie das Ergebnis dann in Ihrer E-Mail.

## Schriften, Bilder und Skripte in Ihrem HTML

Schriften auf Ihrem eigenen Gerät sind auf dem Render-Server nicht vorhanden. Der Server hat die Familien Liberation, Noto Sans und Noto Serif, Noto Sans CJK für Chinesisch, Japanisch und Koreanisch sowie Noto Color Emoji. Unsere Tests vom 2026-10-11 bestätigten, dass CJK-Text und Emojis richtig dargestellt werden. Für andere Schriften laden Sie diese mit @font-face von einer öffentlichen URL oder als Data-URL.

Bilder und Stylesheets werden nur von öffentlichen http- oder https-Adressen geladen. Private Netzwerke, localhost und Cloud-Metadatenadressen sind blockiert. JavaScript läuft standardmäßig, daher ändert ein Skript, das die Seite verändert, auch das Ergebnis. Wenn ein Bild nicht geladen werden kann, zeigt das JPG die Lücke, prüfen Sie die Datei daher vor der Verwendung.

- Verwenden Sie für jedes Bild eine öffentliche https-Adresse.
- Verwenden Sie @font-face mit einer Data-URL für eine eigene Schriftart.

## Größen- und Dateigrenzen

Das kostenlose Web-Tool akzeptiert bis zu 256 KB HTML pro Umwandlung. Die Höhe des Bildbereichs darf höchstens 2000 px betragen. Jeder Besucher kann 10 Umwandlungen pro Minute und 50 pro Tag ausführen. Diese Grenzen gelten für das kostenlose Web-Tool. Die API hat ihre eigenen Tarifgrenzen.

Anonyme Nutzung braucht eine Sicherheitsprüfung (Cloudflare Turnstile). Angemeldete Nutzer überspringen die Prüfung und zahlen 1 Credit pro einfachem Rendering. Kostenlose Konten erhalten jeden Monat 100 kostenlose Credits. Die Ausgabe enthält kein Wasserzeichen. Wenn Ihr HTML die Grenze überschreitet, entfernen Sie ungenutztes CSS oder verschieben Sie große Bilder auf eine öffentliche Adresse.

- Grenze: 256 KB HTML pro Umwandlung im kostenlosen Web-Tool.
- Grenze: 2000 px maximale Höhe im kostenlosen Web-Tool.

## HTML in JPG per Code umwandeln

Sie können dieselbe Umwandlung mit der API aus Ihrem eigenen Code ausführen. Senden Sie eine POST-Anfrage an https://api.aiipworld.com/v1/render mit Ihrem HTML, output auf „jpeg“ und options.quality von 1 bis 100 (Standard 80). Authentifizieren Sie sich mit Ihrem API-Schlüssel in einem Authorization: Bearer-Header. Fertige cURL-, Node- und Python-Beispiele finden Sie unterhalb des Tools.

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 die Datei von download_url herunter. Dieser Link ist nur kurz gültig, speichern Sie die Datei daher sofort. Fehlgeschlagene Aufträge und Aufträge mit Zeitüberschreitung werden erstattet. Unbekannte Optionsnamen werden abgelehnt, prüfen Sie daher die Schreibweise jeder Option. Die API-Dokumentation finden Sie unter /docs/, die Seite zur Screenshot-API unter /screenshot-api/.

- Weitere Optionen sind Viewport-Breite und -Höhe, device_scale_factor von 1 bis 3, full_page und clip.
- Das Ausgabeformat legen Sie mit output „jpeg“ fest. WebP wird von den HTML-Tools nicht unterstützt.

## Datenschutz: was mit Ihrer Datei geschieht

Ihr HTML wird zum Zeichnen an unseren Render-Server gesendet. Ergebnisse aus dem kostenlosen Web-Tool werden nach 10 Minuten gelöscht. Von jeder Umwandlung wird ein Auftrag protokolliert, und angemeldete Nutzer können ihre Aufträge im Dashboard einsehen. Die gerenderte Seite läuft während der Umwandlung über unsere Server, fügen Sie daher nur Inhalte ein, die Sie teilen dürfen.

Für dieses Tool gilt die Richtlinie zur zulässigen Nutzung. Verwenden Sie es nur für echte Dateien und echte Seiten.

- Fügen Sie keine Geheimnisse wie API-Schlüssel in Ihr HTML ein.
- Speichern Sie das benötigte JPG, denn es wird nach Ablauf der Aufbewahrungsfrist gelöscht.

## Fragen

### Wie wandle ich HTML in JPG um?

Fügen Sie Ihr HTML und CSS in den Editor ein, legen Sie Breite und Höhe des Bildbereichs fest, lassen Sie JPG ausgewählt, klicken Sie auf „Bild erstellen“ und laden Sie die Datei herunter. Sie können auch Pixeldichte und JPG-Qualität festlegen, bevor Sie umwandeln.

### Ist HTML in JPEG dasselbe wie HTML in JPG?

Ja. JPG und JPEG sind zwei Namen für dasselbe Format. Die Formatliste im Tool zeigt JPG (JPEG), und die API verwendet den Wert jpeg.

### Warum ist der Hintergrund meines JPG weiß?

JPEG hat keine Transparenz, daher erscheint jeder Bereich, den die Seite nicht füllt, weiß. Setzen Sie in Ihrem CSS eine Hintergrundfarbe am Element html oder body, um das zu ändern.

### Welche JPG-Qualität sollte ich verwenden?

Beginnen Sie mit dem Standard 80. Erhöhen Sie den Wert, wenn Sie blockige Flecken um Text oder Kanten sehen, und senken Sie ihn, wenn die Datei kleiner sein muss. Vergleichen Sie vor der Wahl einige Einstellungen mit Ihrem eigenen HTML.

### Ist ein JPG kleiner als ein PNG?

Nicht immer. In unserem Test mit der flachen Karte war das JPEG bei Qualität 80 etwa so groß wie das PNG. Im Test mit dem Verlaufsbanner war das JPEG deutlich kleiner, das Ergebnis hängt also vom Design ab.

### Kann ich ein HTML-Dokument in JPG umwandeln?

Ja, wenn das Dokument aus HTML und CSS besteht, die Sie einfügen können. Öffnen Sie die .html-Datei in einem Texteditor, kopieren Sie den Inhalt und fügen Sie ihn in den Editor ein. Das Tool nimmt eingefügten Code entgegen, keinen Datei-Upload.

### Kann ich mit diesem Tool eine Live-Webseite in JPG umwandeln?

Nein. Dieses Tool rendert das HTML, das Sie einfügen, nicht eine Seite unter einer Adresse. Um eine Live-Seite über ihre Adresse zu erfassen, verwenden Sie das Tool für Website-Screenshots, das JPEG ausgeben kann.

### Warum wirkt der Text weich oder blockig?

JPEG ist verlustbehaftet, und eine niedrige Qualitätseinstellung erzeugt blockige Flecken um Text und scharfe Kanten. Erhöhen Sie die JPG-Qualität, um sie zu verringern, was allerdings die Dateigröße erhöht. Wenn der Text scharf bleiben muss, verwenden Sie die Seite HTML in PNG.

### Kann ich ein JPG von nur einem Element erhalten?

Nicht im kostenlosen Web-Tool, das das eingefügte HTML rendert. Fügen Sie nur das Element und das CSS ein, das es braucht. In der API enthalten die Screenshot-Optionen clip mit x, y, width und height, damit Sie einen Bereich erfassen können.

### Wie groß kann das JPG werden?

Das kostenlose Tool akzeptiert Breiten von 100 bis 4000 px und Höhen bis zu 2000 px. Die endgültige Größe ist Breite mal Höhe mal Pixeldichte, eine höhere Dichte macht das Bild also größer. Vollseitenaufnahmen in der API sind auf 16.384 px Höhe begrenzt.

### Ist HTML in JPG kostenlos?

Ja, für das kostenlose Web-Tool brauchen Sie kein Konto. Bei anonymer Nutzung wird eine Sicherheitsprüfung verlangt. Angemeldete Nutzer überspringen die Prüfung, erhalten jeden Monat 100 kostenlose Credits und zahlen 1 Credit pro einfachem Rendering.

### Kann ich HTML in JPG per Code umwandeln?

Ja. Senden Sie eine POST-Anfrage an /v1/render mit output auf „jpeg“ und einem Wert für options.quality, fragen Sie dann den Auftrag ab, bis er fertig ist, und laden Sie die Datei herunter. Fertige cURL-, Node- und Python-Beispiele finden Sie unterhalb des Tools.

## Ähnliche Tools

- [HTML in Bild umwandeln](https://aiipworld.com/de/tools/html-in-bild/index.md)
- [Website Screenshot online: Tool](https://aiipworld.com/de/tools/website-screenshot/index.md)
- [Ganze Webseite Screenshot](https://aiipworld.com/de/tools/ganze-webseite-screenshot/index.md)
- [og image generator](https://aiipworld.com/de/tools/og-image-generator/index.md)
- [Code in Bild umwandeln](https://aiipworld.com/de/tools/code-in-bild/index.md)
- [Text in PNG umwandeln](https://aiipworld.com/de/tools/text-in-png/index.md)
- [PNG in WebP umwandeln: Konverter](https://aiipworld.com/de/tools/png-in-webp/index.md)
- [WebP in PNG umwandeln: Ihr Bild online konvertieren](https://aiipworld.com/de/tools/webp-in-png/index.md)
- [PNG in JPG umwandeln](https://aiipworld.com/de/tools/png-in-jpg/index.md)
- [WebP in JPG umwandeln](https://aiipworld.com/de/tools/webp-in-jpg/index.md)
- [SVG in JPG umwandeln: Ihre SVG-Datei kostenlos konvertieren](https://aiipworld.com/de/tools/svg-in-jpg/index.md)

Seite: https://aiipworld.com/de/tools/html-in-jpg/