HTML email preview: Online-E-Mail-Vorschau
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.
- Das ist Chromium, das Ihr HTML in der von Ihnen gewählten Breite zeichnet. Es ist nicht Gmail, Outlook, Apple Mail oder eine andere Mail-App und übernimmt deren Regeln nicht.
- JavaScript ist in diesem Tool ausgeschaltet. Das Tool versendet keine E-Mail, vergibt keinen Spam-Wert und prüft nicht, ob Links funktionieren.
- Die kostenlose Aufnahme endet bei 2000 px Höhe. Was darunter liegt, ist nicht im PNG enthalten.
Dies zeigt, wie Headless-Chromium Ihr HTML in der gewählten Breite darstellt. Es imitiert nicht Gmail, Outlook oder eine andere E-Mail-App, die HTML und CSS auf eigene Weise umschreiben oder einschränken. Senden Sie eine Testnachricht an die echten Postfächer, die Ihnen wichtig sind.
1.3 KB von 256 KB im kostenlosen Web-Tool erlaubt.
Die Option Dunkel stellt das dunkle Farbschema des Browsers ein, daher wirkt nur CSS, das für prefers-color-scheme geschrieben ist. JavaScript ist ausgeschaltet. Entfernte Bilder werden von öffentlichen Adressen geladen.
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 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.
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
Zuletzt geprüft:
So funktioniert es
- 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.
- 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.
- 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.
- Legen Sie die Aufnahmehöhe fest: 800, 1200 oder 2000 px. Bei anonymer Nutzung ist vor der Vorschau eine kurze Sicherheitsprüfung nötig.
- 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.
Beispielergebnis
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.
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.