# HTML email preview: Online-E-Mail-Vorschau

> Ein kostenloses Online-Tool, das das HTML einer E-Mail in Chromium in einer gewählten Breite zeichnet und als PNG speichert, als Layoutprüfung und nicht als Test der Mail-Programme.

Mit dem HTML email previewer zeichnen Sie den Code Ihrer E-Mail in Chromium in der Breite, die Sie wählen. Sie fügen den E-Mail-HTML-Code ein, wählen eine Breite und erhalten ein PNG, mit dem Sie Layout und Farben prüfen. Es ist keine Kopie davon, wie Gmail, Outlook oder eine andere Mail-App Ihre E-Mail anzeigt.

## Die wichtigsten Fakten

- Breiten: 600, 375, 320 oder 800 px, helles oder dunkles Farbschema, 1x oder 2x Pixeldichte; JavaScript ist ausgeschaltet.
- Aufnahmehöhe 800 oder 1200 px oder bis zu 2000 px im kostenlosen Tool; angemeldete Nutzer können die gesamte E-Mail ab 2 Credits aufnehmen.
- Ahmt weder Gmail noch Outlook noch eine andere Mail-App nach, versendet keine E-Mail, prüft keine Spam-Werte und testet keine Links.
- 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

- [Can I email: HTML and CSS support in email clients](https://www.caniemail.com/)
- [Chrome DevTools Protocol: Page.captureScreenshot](https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-captureScreenshot)

Zuletzt geprüft: 2026-10-15

## So funktioniert es

1. Fügen Sie das HTML Ihrer E-Mail in das Feld ein. Nehmen Sie das CSS mit auf, das Ihre E-Mail verwendet, entweder inline oder in einem style-Block.
2. Wählen Sie eine Breite: 600, 375, 320 oder 800 px. Beginnen Sie mit 600 px und prüfen Sie dann 375 px oder 320 px für schmale Smartphone-Bildschirme.
3. Wählen Sie das helle oder dunkle Farbschema sowie 1x oder 2x Pixeldichte. Nutzen Sie 2x, um kleine Schrift und dünne Rahmen genauer anzusehen.
4. Legen Sie die Aufnahmehöhe fest: 800, 1200 oder 2000 px. Bei anonymer Nutzung ist vor der Vorschau eine kurze Sicherheitsprüfung nötig.
5. Starten Sie die Vorschau und laden Sie das PNG herunter. Speichern Sie es, wenn Sie es behalten möchten, da Ergebnisse nach 10 Minuten gelöscht werden.

## HTML email preview: So prüfen Sie eine E-Mail

Eine HTML-E-Mail-Vorschau zeigt den Code Ihrer E-Mail so, wie ein Browser ihn darstellt. Sie fügen das HTML ein, das Tool rendert es in Chromium in der von Ihnen gewählten Breite, und Sie erhalten ein PNG zurück.

Nutzen Sie die Vorschau, während Sie eine E-Mail erstellen oder bearbeiten. Ändern Sie den Code, starten Sie die Vorschau erneut und vergleichen Sie die Bilder in jeder Breite. Sehen Sie sich beide Farbschemata an, bevor Sie weitermachen.

Bei anonymer Nutzung ist eine Sicherheitsprüfung nötig. Angemeldete Nutzer überspringen die Prüfung und verwenden Credits.

## Was diese Vorschau zeigt und was nicht

Die Vorschau zeigt, was Chromium aus Ihrem HTML und CSS in der eingestellten Breite zeichnet. Sie können Layout, Schrift, Farben, Abstände und Bilder so prüfen, wie ein Browser sie darstellt.

Sie zeigt nicht, wie Gmail, Outlook, Apple Mail oder eine andere Mail-App Ihre E-Mail darstellt. Manche Mail-Apps schreiben Stile um, entfernen Teile des CSS, blockieren Bilder und wenden einen eigenen Dunkelmodus an. Das geschieht hier nicht.

Die Vorschau ist nur eine Prüfung der Darstellung. Für die Zustellung senden Sie selbst eine Testnachricht an einige echte Postfächer und prüfen jeden Link von Hand.

- Zeichnet Ihr HTML in Chromium in einer Breite, die Sie wählen.
- Zeigt das helle oder dunkle Farbschema so, wie es der Browser sieht.
- Ahmt weder Gmail noch Outlook noch eine andere Mail-App nach.
- Versendet keine E-Mail, prüft keinen Spam und keine Links.

## Breiten und Ansicht auf dem Smartphone

Stellen Sie zuerst 600 px ein, um das Hauptlayout zu prüfen. Stellen Sie dann 375 px oder 320 px ein, um zu sehen, wie sich die E-Mail auf schmalen Smartphone-Bildschirmen verhält. Nutzen Sie 800 px, um ein breiteres Layout zu prüfen.

Die Breiteneinstellung ändert den Platz, in den Ihr HTML passen muss. Sie ist kein Geräte-Emulator und bildet deshalb nicht den Browser eines Smartphones nach.

Prüfen Sie, ob Tabellen und Bilder sich so verkleinern oder untereinander umbrechen, wie Sie es erwarten. Eine Tabelle mit fester Breite, die breiter ist als die gewählte Breite, ragt über den Rand des Bildes hinaus.

## Dunkles Farbschema

Wählen Sie das Farbschema „Dunkel“, um die E-Mail mit eingeschalteter dunkler Einstellung des Browsers zu rendern. Es ändert sich nur CSS, das für den Dunkelmodus geschrieben ist, also Regeln innerhalb eines prefers-color-scheme: dark-Blocks.

Hat Ihre E-Mail keine Dunkel-Regeln, sieht die dunkle Vorschau genauso aus wie die helle. Ergänzen Sie zuerst Dunkel-Regeln und prüfen Sie dann beide Schemata.

Das Tool schreibt Farben nicht um, wie es manche Mail-Apps tun. Eine Farbe, die hier richtig aussieht, kann in einem echten Postfach anders wirken. Senden Sie deshalb eine Testnachricht, um sie zu sehen.

## Bilder, Schriftarten und Links

Externe Bilder werden von öffentlichen Adressen mit http:// und https:// geladen. Bilder auf privaten oder lokalen Adressen, etwa localhost, werden blockiert. Ein Pfad, der nur auf Ihrem Gerät existiert, lädt nicht, verwenden Sie deshalb vollständige Bildadressen.

Der Render-Server hat eigene Schriftarten, darunter Liberation Sans, Liberation Serif, Noto Sans und Noto Serif. Arial und Helvetica werden auf Liberation Sans abgebildet, Times New Roman auf Liberation Serif. Schriftarten auf Ihrem Gerät sind nicht vorhanden.

Um eine andere Schriftart zu verwenden, laden Sie sie mit @font-face über eine öffentliche URL oder eine Data-URL.

Das Tool prüft nicht, ob Ihre Links funktionieren. Testen Sie jeden Link von Hand.

## Checkliste vor dem Versand

Gehen Sie diese Liste durch, bevor Sie die E-Mail an jemanden senden. Sie deckt ab, was die Vorschau zeigen kann; den Rest prüft nur ein echter Versand.

- Vorschau in 600, 375 und 320 px ansehen und prüfen, dass nichts über den Rand ragt.
- Das dunkle Farbschema ebenso prüfen wie das helle.
- Prüfen, dass jedes Bild eine Adresse mit https:// verwendet und geladen wird.
- Den Fließtext in 1x und in 2x lesen und prüfen, ob er gut lesbar ist.
- Jeden Link von Hand prüfen, auch den Link zu Ihrer Website.
- Eine Testnachricht an einige echte Postfächer senden und die E-Mail in den Apps ansehen, die Ihre Leser verwenden.

## Eine ganze E-Mail aufnehmen

Das kostenlose Tool nimmt einen Ausschnitt vom oberen Rand auf, bis zu 2000 px hoch. Lange E-Mails brauchen die größere Aufnahmehöhe oder eine Aufnahme der gesamten Seite.

Angemeldete Nutzer können die ganze E-Mail mit einer echten Aufnahme der gesamten Seite erfassen. Sie kostet ab 2 Credits und ist auf 16.384 px Höhe begrenzt. Höhere Seiten werden abgeschnitten, und das Ergebnis weist darauf hin.

## HTML-E-Mail-Vorschau aus Code

Sie können dieselbe Darstellung aus Ihrem eigenen Code auslösen. Senden Sie eine POST-Anfrage an /v1/render mit dem Vorgang screenshot, Ihrer E-Mail im Feld html, der Viewport-Breite und color_scheme. 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 PNG über download_url herunter. Der Link ist nur kurz gültig, laden Sie die Datei also bald nach Abschluss des Auftrags herunter. Credits für fehlgeschlagene Aufträge und Aufträge mit Zeitüberschreitung werden erstattet.

Webhooks sind noch nicht verfügbar, daher ist Abfragen die einzige Möglichkeit, das Ende eines Auftrags zu erfahren. Es gibt keinen Stapel-Endpoint, senden Sie also pro E-Mail eine Anfrage.

Die API führt JavaScript standardmäßig aus. Setzen Sie javascript auf false, um dem Tool zu entsprechen, das Skripte ausgeschaltet lässt. Authentifizieren Sie sich mit Ihrem API-Schlüssel als Bearer-Token. Jede einfache Umwandlung kostet 1 Credit.

## Eine E-Mail-Vorschau beim Erstellen nutzen

Ein Tool für die E-Mail-Vorschau passt gut in den Schritt des Erstellens. Machen Sie eine Änderung, starten Sie die Vorschau in 600 px und sehen Sie sich das PNG an, bevor Sie etwas anderes ändern.

Bewahren Sie eine Kopie jedes PNG auf, wenn Sie Versionen vergleichen möchten. Ergebnisse werden nach 10 Minuten gelöscht, speichern Sie die Datei daher selbst.

Jede HTML-E-Mail-Vorschau ist nur eine Ansicht Ihres Codes in einer Breite, kein Urteil darüber, wie die Nachricht in jeder App aussieht. Nutzen Sie mehrere Breiten und beide Farbschemata, bevor Sie das Layout für fertig halten.

## Fragen

### Zeigt das, wie Gmail oder Outlook meine E-Mail darstellen?

Nein. Die Vorschau zeichnet Ihr HTML in Chromium in der gewählten Breite. Sie kopiert weder Gmail, Outlook, Apple Mail noch eine andere Mail-App und übernimmt auch nicht deren Regeln oder deren Dunkelmodus. Senden Sie eine Testnachricht an echte Postfächer, um zu sehen, wie jede App Ihre E-Mail anzeigt.

### Wie prüfe ich eine HTML-E-Mail in Smartphone-Breite?

Wählen Sie 375 px oder 320 px als Breite, bevor Sie die Vorschau starten. Vergleichen Sie dieses PNG mit der Version in 600 px, um die Unterschiede zu sehen. Die Breiteneinstellung ist kein Smartphone-Emulator.

### Kann ich den Dunkelmodus prüfen?

Ja. Wählen Sie das Farbschema „Dunkel“, dann wird die dunkle Einstellung des Browsers eingeschaltet. Es ändert sich nur CSS, das für den Dunkelmodus geschrieben ist, daher schreibt das Tool Ihre Farben nicht um.

### Warum fehlen meine Bilder?

Bilder müssen über öffentliche Adressen mit http:// oder https:// geladen werden. Bilder auf localhost oder anderen privaten Adressen werden blockiert, und ein Pfad, der nur auf Ihrem Gerät existiert, lädt nicht. Öffnen Sie die Bildadresse in einem Browser, um zu prüfen, ob sie funktioniert.

### Werden Skripte ausgeführt?

Nein. JavaScript ist in diesem Tool ausgeschaltet. Die API führt JavaScript standardmäßig aus, setzen Sie dort daher javascript auf false, wenn Sie dasselbe Ergebnis wollen.

### Kann ich von hier aus eine Testnachricht senden?

Nein. Das Tool erstellt nur ein PNG Ihres HTML und versendet keine E-Mail. Senden Sie eine Testnachricht von Ihrem E-Mail-Dienst an Ihre eigenen Postfächer.

### Prüft es Spam oder Links?

Nein. Das Tool vergibt keinen Spam-Wert und prüft nicht, ob Links funktionieren. Prüfen Sie Ihre Links von Hand, bevor Sie senden.

### Kann ich die ganze E-Mail aufnehmen?

Das kostenlose Tool nimmt bis zu 2000 px Höhe auf. Angemeldete Nutzer können die ganze E-Mail mit einer Aufnahme der gesamten Seite erfassen, die ab 2 Credits kostet und auf 16.384 px Höhe begrenzt ist.

### Wie lange werden Ergebnisse aufbewahrt?

Ergebnisse werden nach 10 Minuten gelöscht. Speichern Sie das PNG, sobald die Vorschau fertig ist. Zu jedem Auftrag wird ein Datensatz gespeichert, und angemeldete Nutzer können ihre Aufträge im Dashboard einsehen.

### Brauche ich ein Konto?

Nein. Die anonyme Nutzung ist kostenlos und erfordert eine Sicherheitsprüfung. Angemeldete Nutzer überspringen die Prüfung und verwenden Credits.

### Hat das PNG ein Wasserzeichen?

Nein. Wir fügen der Ausgabe des kostenlosen Tools kein Wasserzeichen hinzu.

### Warum wirkt meine Vorschau abgeschnitten?

Die Aufnahmehöhe begrenzt das Bild. Wählen Sie eine größere Aufnahmehöhe, bis zu 2000 px im kostenlosen Tool, oder nutzen Sie als angemeldeter Nutzer eine Aufnahme der gesamten Seite für die ganze E-Mail.

### Ist das ein vollständiger E-Mail-Tester?

Nein. Es ist ein schneller Weg, das Layout zu prüfen, aber kein vollständiger HTML-E-Mail-Tester. Die Vorschau zeichnet Ihren Code in Chromium in der gewählten Breite, damit Sie Abstände, Schrift und Farben sehen. Sie zeigt nicht, wie Gmail, Outlook oder eine andere Mail-App die Nachricht darstellt, und sie versendet nichts.

### Sollte ich die E-Mail zusätzlich in echten Postfächern prüfen?

Ja. Nutzen Sie die Vorschau, um Layoutprobleme früh zu finden, und senden Sie dann eine HTML-Testnachricht an einige Postfächer, die Ihnen gehören. Mail-Apps schreiben Stile um und blockieren Bilder auf ihre eigene Art, und nur ein echter Versand zeigt, was Ihre Leser sehen.

## Ä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)
- [HTML in PDF umwandeln: der Konverter](https://aiipworld.com/de/tools/html-in-pdf/index.md)

Seite: https://aiipworld.com/de/tools/html-email-preview/