HTML email preview : aperçu d'e-mail HTML en ligne
Cet outil de html email preview dessine le HTML de votre e-mail dans Chromium à la largeur que vous choisissez. Vous collez le code, choisissez une largeur et obtenez un PNG pour vérifier la mise en page et les couleurs. Ce n'est pas une copie de la façon dont Gmail, Outlook ou toute autre application de messagerie affichera votre e-mail.
- Il s'agit de Chromium qui dessine votre HTML à une largeur que vous choisissez. Ce n'est pas Gmail, Outlook, Apple Mail ni une autre application de messagerie, et cela ne reproduit pas leurs règles.
- JavaScript est désactivé dans cet outil. L'outil n'envoie pas d'e-mail, ne donne pas de score de spam et ne vérifie pas si les liens fonctionnent.
- La capture gratuite s'arrête à 2000 px de haut. Tout ce qui se trouve plus bas que cette hauteur n'est pas dans le PNG.
Ceci montre comment Chromium sans interface (headless) affiche votre HTML à la largeur que vous choisissez. Cela ne reproduit pas Gmail, Outlook ni aucune autre application de messagerie, qui réécrivent ou limitent le HTML et le CSS à leur façon. Envoyez un test aux boîtes de réception réelles qui vous importent.
1.3 KB sur 256 KB autorisés dans l'outil web gratuit.
L'option sombre définit le schéma de couleurs sombre du navigateur, donc seul le CSS écrit pour prefers-color-scheme change. JavaScript est désactivé. Les images distantes se chargent depuis des adresses publiques.
Effectuez la vérification de sécurité pour activer le bouton.
Résultat
Votre image apparaîtra ici.
L'outil web gratuit capture au maximum 2000px de hauteur. Pour les captures plus hautes, utilisez l'API.
Conservation : les résultats des outils web sont supprimés après 10 minutes. Les résultats de l'API sont conservés 1 jour avec la formule gratuite et 7 jours avec Starter et Pro (30 jours avec Business et Scale). Un historique de chaque tâche (type, heure, statut et crédits, mais pas ce que vous avez envoyé) est conservé pendant 30 jours sans compte, ou tant que votre compte existe si vous êtes connecté.
Aucun compte nécessaire
10 par minute et 50 par jour gratuitement.
Rendu dans un vrai navigateur
Chromium sans interface (headless), le même moteur que l'API.
Supprimés automatiquement
Les résultats de l'outil web sont supprimés après 10 minutes.
Confidentialité : ce que vous envoyez sert uniquement à créer ce fichier. Ce que vous envoyez est supprimé à la fin de la tâche, y compris de l'historique de la tâche, et le résultat est supprimé après 10 minutes. Voir la politique de confidentialité.
Faites la même chose depuis votre code
La même requête, construite à partir de l'entrée et des options ci-dessus. Créez un compte pour obtenir une clé API.
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"Lots
L'outil web traite 1 document à la fois. L'API prend une requête par document, vous pouvez donc automatiser autant de requêtes que votre formule le permet.
Plus de contrôle
La capture de la page entière (full_page), le recadrage sur une zone, les en-têtes de requête et un user agent personnalisé sont des options de l'API. Voir la documentation.
Conservation
Les résultats des outils web sont conservés 10 minutes ; les résultats gratuits de l'API 1 jour ; les résultats de Starter et Pro 7 jours ; Business et Scale 30 jours. L'outil web permet 10 conversions par minute et 50 par jour et par visiteur.
En une phrase
Un outil gratuit en ligne qui dessine le HTML d'un e-mail dans Chromium à une largeur choisie et l'enregistre en PNG, comme contrôle de mise en page et non comme test de client de messagerie.
Points clés
- Largeurs : 600, 375, 320 ou 800 px, schéma de couleurs clair ou sombre, densité 1x ou 2x ; JavaScript est désactivé.
- Hauteur de capture de 800 ou 1200 px, ou jusqu'à 2000 px dans l'outil gratuit ; les utilisateurs connectés peuvent capturer l'e-mail entier à partir de 2 crédits.
- Ne reproduit pas Gmail, Outlook ni aucune application de messagerie, et n'envoie pas d'e-mail, ne vérifie pas les scores de spam et ne teste pas les liens.
- Gratuit sans compte : jusqu'à 10 conversions par minute et 50 par jour et par visiteur, sans filigrane. Connecté, chaque rendu coûte 1 crédit (100 crédits gratuits chaque mois).
- Les fichiers sont supprimés automatiquement : 10 minutes après la conversion sans compte, 1 jour avec un compte gratuit.
- Les développeurs peuvent effectuer le même rendu avec POST https://api.aiipworld.com/v1/render et une clé API (voir la page API de capture d'écran).
Sources
Dernière vérification:
Fonctionnement
- Collez le HTML de votre e-mail dans la zone prévue. Incluez le CSS utilisé par votre e-mail, en ligne ou dans un bloc style.
- Choisissez une largeur : 600, 375, 320 ou 800 px. Commencez par 600 px, puis vérifiez 375 px ou 320 px pour les petits écrans de téléphone.
- Choisissez le schéma de couleurs clair ou sombre, et la densité de pixels 1x ou 2x. Utilisez 2x pour examiner de plus près les petits textes et les bordures fines.
- Réglez la hauteur de capture : 800, 1200 ou 2000 px. Une utilisation anonyme demande une rapide vérification de sécurité avant que l'aperçu ne s'exécute.
- Lancez l'aperçu et téléchargez le PNG. Enregistrez-le si vous voulez le garder, car les résultats sont supprimés après 10 minutes.
Exemple de résultat
Comment faire un html email preview
Une HTML email preview affiche le code de votre e-mail tel qu'un navigateur le dessine. Vous collez le HTML, l'outil le rend dans Chromium à la largeur que vous choisissez, et vous recevez un PNG.
Utilisez-la pendant que vous créez ou modifiez un e-mail. Changez le code, relancez l'aperçu et comparez les images à chaque largeur. Examinez les deux schémas de couleurs avant de passer à la suite.
Une utilisation anonyme demande une vérification de sécurité. Les utilisateurs connectés passent cette étape et utilisent des crédits.
Ce que cet aperçu montre et ce qu'il ne montre pas
L'aperçu montre ce que Chromium dessine à partir de votre HTML et de votre CSS à la largeur que vous avez choisie. Vous pouvez vérifier la mise en page, les caractères, les couleurs, les espacements et les images tels qu'un navigateur les affiche.
Il ne montre pas comment Gmail, Outlook, Apple Mail ou toute autre application de messagerie affiche votre e-mail. Certaines applications réécrivent les styles, suppriment une partie du CSS, bloquent les images et appliquent leur propre mode sombre. Rien de cela ne se produit ici.
L'aperçu sert uniquement à contrôler le rendu. Pour la livraison, envoyez vous-même un message de test à quelques boîtes de réception réelles et vérifiez chaque lien à la main.
- Dessine votre HTML dans Chromium à une largeur que vous choisissez.
- Affiche le schéma de couleurs clair ou sombre tel que le navigateur le voit.
- Ne reproduit pas Gmail, Outlook ni aucune autre application de messagerie.
- N'envoie pas d'e-mail, ne vérifie pas le spam ni les liens.
Largeurs et affichage sur téléphone
Réglez d'abord 600 px pour vérifier la mise en page principale. Passez ensuite à 375 px ou 320 px pour voir comment l'e-mail se comporte sur les petits écrans de téléphone. Utilisez 800 px pour vérifier une mise en page plus large.
Le réglage de la largeur modifie l'espace dans lequel votre HTML doit tenir. Ce n'est pas un émulateur d'appareil, il ne reproduit donc pas le navigateur d'un téléphone.
Vérifiez que les tableaux et les images se réduisent ou s'empilent comme prévu. Un tableau de largeur fixe plus large que la largeur choisie dépassera du bord de l'image.
Schéma de couleurs sombre
Choisissez le schéma sombre pour rendre l'e-mail avec la préférence sombre du navigateur activée. Seul le CSS écrit pour le mode sombre change, c'est-à-dire les règles placées dans un bloc prefers-color-scheme : dark.
Si votre e-mail ne contient aucune règle sombre, l'aperçu sombre ressemble à l'aperçu clair. Ajoutez d'abord les règles sombres, puis vérifiez les deux schémas.
L'outil ne réécrit pas les couleurs comme le font certaines applications de messagerie. Une couleur correcte ici peut paraître différente dans une vraie boîte de réception, envoyez donc un test pour la voir.
Images, polices et liens
Les images distantes se chargent depuis des adresses publiques en http:// et https://. Les images sur des adresses privées ou locales, comme localhost, sont bloquées. Un chemin qui n'existe que sur votre appareil ne se chargera pas : utilisez donc des adresses d'image complètes.
Le serveur de rendu dispose de ses propres polices, dont Liberation Sans, Liberation Serif, Noto Sans et Noto Serif. Arial et Helvetica correspondent à Liberation Sans, et Times New Roman correspond à Liberation Serif. Les polices de votre appareil ne sont pas disponibles.
Pour utiliser une autre police, chargez-la avec @font-face depuis une URL publique ou une URL de données.
L'outil ne vérifie pas si vos liens fonctionnent. Testez chaque lien à la main.
Une liste de contrôle avant l'envoi
Parcourez cette liste avant d'envoyer l'e-mail à qui que ce soit. Elle couvre ce que l'aperçu peut montrer ; le reste nécessite un envoi réel.
- Prévisualisez à 600, 375 et 320 px, et vérifiez que rien ne dépasse du bord.
- Vérifiez le schéma de couleurs sombre autant que le clair.
- Confirmez que chaque image utilise une adresse https:// et se charge.
- Lisez le texte du corps en 1x et en 2x, et vérifiez qu'il est facile à lire.
- Vérifiez chaque lien à la main, y compris celui qui mène à votre site.
- Envoyez un test à quelques boîtes de réception réelles, et regardez l'e-mail dans les applications que vos lecteurs utilisent.
Capturer un e-mail entier
L'outil gratuit capture une fenêtre depuis le haut, jusqu'à 2000 px de haut. Les longs e-mails nécessitent la hauteur de capture plus grande, ou une capture de page entière.
Les utilisateurs connectés peuvent capturer l'e-mail entier avec une véritable capture de page entière. Elle coûte à partir de 2 crédits et est limitée à 16 384 px de haut. Les pages plus hautes sont coupées, et le résultat l'indique.
HTML email preview depuis votre code
Vous pouvez effectuer le même rendu depuis votre propre code. Envoyez une requête POST vers /v1/render avec l'opération screenshot, votre e-mail dans le champ html, la largeur de fenêtre d'affichage (viewport) et color_scheme. L'API répond avec 202 et un job_id.
Interrogez GET /v1/jobs/:id jusqu'à ce que le statut soit succeeded, failed ou timeout, puis téléchargez le PNG depuis download_url. Le lien est de courte durée : téléchargez le fichier peu après la réussite de la tâche. Les crédits des tâches échouées ou dont le délai est dépassé sont restitués.
Les webhooks ne sont pas encore disponibles, donc l'interrogation est le seul moyen de savoir quand une tâche se termine. Il n'existe pas d'endpoint par lots : envoyez une requête par e-mail.
L'API exécute JavaScript par défaut. Réglez javascript sur false pour correspondre à l'outil, qui désactive les scripts. Authentifiez-vous avec votre clé API en jeton Bearer. Chaque rendu simple coûte 1 crédit.
Utiliser un outil d'aperçu d'e-mail pendant la création
Un outil d'aperçu d'e-mail s'intègre bien à l'étape de création. Faites une seule modification, lancez l'aperçu à 600 px et regardez le PNG avant de changer autre chose.
Gardez une copie de chaque PNG si vous voulez comparer les versions. Les résultats sont supprimés après 10 minutes, enregistrez donc le fichier vous-même.
Chaque html email preview n'est qu'une vue de votre code à une largeur, et non un verdict sur l'affichage du message dans toutes les applications. Utilisez plusieurs largeurs et les deux schémas de couleurs avant de juger la mise en page prête.
Questions
Cet outil montre-t-il comment Gmail ou Outlook affichera mon e-mail ?
Non. L'aperçu dessine votre HTML dans Chromium à la largeur que vous choisissez. Il ne reproduit pas Gmail, Outlook, Apple Mail ni aucune autre application de messagerie, et n'applique ni leurs règles ni leur mode sombre. Envoyez un test à de vraies boîtes de réception pour voir comment chaque application affiche votre e-mail.
Comment faire un html email preview à la largeur d'un téléphone ?
Choisissez 375 px ou 320 px comme largeur avant de lancer l'aperçu. Comparez ce PNG avec la version à 600 px pour voir ce qui change. Le réglage de la largeur n'est pas un émulateur de téléphone.
Puis-je prévisualiser le mode sombre ?
Oui. Choisissez le schéma de couleurs sombre et la préférence sombre du navigateur est activée. Seul le CSS écrit pour le mode sombre change, donc l'outil ne réécrit pas vos couleurs.
Pourquoi mes images manquent-elles ?
Les images doivent se charger depuis des adresses publiques en http:// ou https://. Les images sur localhost ou d'autres adresses privées sont bloquées, et un chemin qui n'existe que sur votre appareil ne se chargera pas. Ouvrez l'adresse de l'image dans un navigateur pour vérifier qu'elle fonctionne.
Les scripts sont-ils exécutés ?
Non. JavaScript est désactivé dans cet outil. L'API exécute JavaScript par défaut, donc réglez javascript sur false si vous voulez le même résultat.
Puis-je envoyer un e-mail de test depuis ici ?
Non. L'outil ne fait qu'un PNG de votre HTML et n'envoie pas d'e-mail. Envoyez un test à vos propres boîtes de réception depuis votre service de messagerie.
Vérifie-t-il le spam ou les liens ?
Non. L'outil ne donne pas de score de spam et ne vérifie pas si les liens fonctionnent. Vérifiez vos liens à la main avant l'envoi.
Puis-je capturer l'e-mail entier ?
L'outil gratuit capture jusqu'à 2000 px de haut. Les utilisateurs connectés peuvent capturer l'e-mail entier avec une capture de page entière, qui coûte à partir de 2 crédits et est limitée à 16 384 px de haut.
Combien de temps les résultats sont-ils conservés ?
Les résultats sont supprimés après 10 minutes. Enregistrez le PNG une fois l'aperçu prêt. Un enregistrement de chaque tâche est conservé, et les utilisateurs connectés peuvent voir leurs tâches dans le tableau de bord.
Ai-je besoin d'un compte ?
Non. L'utilisation anonyme est gratuite et demande une vérification de sécurité. Les utilisateurs connectés passent cette étape et utilisent des crédits.
Le PNG comporte-t-il un filigrane ?
Non. Nous n'ajoutons aucun filigrane aux résultats de l'outil gratuit.
Pourquoi mon aperçu semble-t-il coupé ?
La hauteur de capture limite l'image. Choisissez une hauteur de capture plus grande, jusqu'à 2000 px dans l'outil gratuit, ou utilisez une capture de page entière pour l'e-mail complet en étant connecté.
S'agit-il d'un testeur d'e-mails complet ?
Non. C'est un moyen rapide de vérifier la mise en page, pas un testeur html email complet. L'aperçu dessine votre code dans Chromium à la largeur que vous choisissez, afin de voir l'espacement, les caractères et les couleurs. Il ne montre pas comment Gmail, Outlook ou une autre application de messagerie affiche le message, et n'envoie rien.
Faut-il aussi vérifier l'e-mail dans de vraies boîtes de réception ?
Oui. Utilisez l'aperçu pour repérer tôt les problèmes de mise en page, puis envoyez un e-mail HTML de test à quelques boîtes de réception que vous contrôlez. Les applications de messagerie réécrivent les styles et bloquent les images à leur façon, et seul un envoi réel montre ce que verront vos lecteurs.
Besoin de ceci dans votre application ou en masse ?
Cet outil fonctionne sur l'API de rendu, donc le même image représente une seule requête HTTP depuis votre code. Un compte gratuit inclut 100 crédits par mois.