IMAGE

HTML en image : le guide du développeur (2026)

Comment convertir HTML, CSS et nœuds DOM en images PNG/JPG. Cas d'usage, bibliothèques, API navigateur, génération d'images OG, filigranes, et comment le faire sans envoyer ton code sur un serveur.

DuneTools · · 10 min read

Convertir du HTML en image, prendre du markup arbitraire et le rendre comme PNG ou JPG statique, est une de ces opérations qui semblent simples et qui s’avèrent étonnamment subtiles. Polices web, CORS, contenu dynamique, fonctionnalités CSS modernes, fonds transparents, rendu retina… chacune ajoute une nouvelle ride.

Ce guide couvre ce que tu dois savoir en 2026 pour choisir la bonne approche selon ton cas d’usage : des captures ponctuelles à la génération dynamique d’images Open Graph à grande échelle.

Cas d’usage, quand tu as besoin de HTML en image

1. Images Open Graph dynamiques

Chaque article de blog, page produit ou profil utilisateur reçoit une carte sociale unique. Au lieu de concevoir chacune à la main dans Figma, tu construis un template HTML/CSS et tu rends en PNG au build (ou à la demande). C’est ce que @vercel/og, Cloudflare Workers, et les cartes OG par page de DuneTools (voir /og/ sur ce site) font sous le capot.

2. Captures d’écran de composants

Montrer une bibliothèque de graphiques, un composant UI, un dashboard d’administration, capturer un nœud DOM spécifique te permet d’intégrer un instantané sans outillage de capture complexe. Utile pour la documentation, les sites marketing, les pages de statut.

3. Imagerie email-friendly

Les clients email (Outlook en particulier) ont un support HTML/CSS terrible. Une facture dynamique, un graphique, un badge de statut, rends-les côté serveur en PNG et intègre comme <img> pour un rendu identique garanti partout.

4. Reçus, factures, certificats

Sortie statique, non éditable PDF/PNG de données HTML structurées. Des outils comme les reçus Stripe, les générateurs de certificats, les imprimantes de billets font tous ça.

5. Filigrane et visuels signés

Rendre du texte/code dynamique sur une image de base comme un seul PNG composite, pour la protection, l’attribution, ou le partage.

6. Code-vers-image (l’alternative moderne aux captures d’écran)

Des outils comme Carbon, Ray.so, Polacode rendent du code coloré syntaxiquement comme des belles images de marque. En dessous : HTML/CSS rendu en PNG.

Approches et compromis

A) Côté serveur : Puppeteer / Playwright

Lance une instance Chromium réelle sur le serveur, navigue vers une URL ou fixe le contenu HTML, capture.

Pour : fidélité parfaite au pixel près (c’EST un vrai navigateur), support CSS/JS/police complet, peut gérer n’importe quelle URL avec cookies/auth.

Contre : lourd (binaire Chromium 200+ MB), lent à démarrer (~1-3 secondes de cold start), cher en serverless. Les démarrages à froid sur AWS Lambda sont notoirement pénibles.

Idéal pour : besoins de fidélité élevée à faible volume (rapports PDF, captures d’écran de page complète, contenu dynamique complexe).

import puppeteer from 'puppeteer';
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setContent(htmlString);
const buffer = await page.screenshot({ type: 'png' });
await browser.close();

B) satori + resvg (l’approche Vercel)

Rendre du markup JSX/HTML-like en SVG avec satori (un moteur de rendu personnalisé), puis rasteriser en PNG avec resvg. Utilisé par @vercel/og, la génération OG Next.js, et le script build-og.mjs de DuneTools.

Pour : très rapide (~50-200 ms), petite dépendance (~10 MB), fonctionne dans les runtimes Edge (Cloudflare Workers, Vercel Edge Functions, AWS Lambda@Edge).

Contre : sous-ensemble de CSS (pas de z-index, Grid limité, pas d’exécution JS). Tu conçois dans les contraintes, mais elles couvrent 90% des cas d’usage d’images OG.

Idéal pour : génération d’images OG à haut volume, Edge Functions, rendu au build.

C) html2canvas / dom-to-image (côté client)

Bibliothèques JavaScript pures qui parcourent le DOM, le sérialisent en SVG foreignObject, et rasterisent via HTML5 Canvas. Tournent entièrement dans le navigateur de l’utilisateur.

Pour : zéro serveur, gratuit, pas de problèmes CORS pour le contenu same-origin, retour instantané.

Contre : différences de rendu subtiles avec un vrai navigateur (certaines fonctionnalités CSS approximées, le chargement des polices web demande de l’attention), les ressources externes bloquées par CORS nécessitent un proxy.

Idéal pour : capture côté client de composants que les utilisateurs regardent, fonctionnalités capture-vers-presse-papiers, outils internes.

D) DuneTools HTML en image

Une combinaison de l’approche C avec un rendu accéléré par WebAssembly, conçu pour des conversions ponctuelles occasionnelles. Colle du HTML/CSS, récupère du PNG/JPG sans installer d’infrastructure ni apprendre une bibliothèque.

Pour : zéro install, zéro serveur, fonctionne hors ligne après le chargement de la page, gère le CSS moderne via le moteur réel du navigateur.

Contre : pas pour un usage programmatique à haut volume (utilise B ou A pour ça).

Idéal pour : développeurs qui ont besoin de conversions HTML-vers-image occasionnelles sans monter d’infrastructure.

Pièges courants

Chargement des polices web

Si ton HTML utilise une Google Font, le moteur de rendu doit avoir la police chargée avant la capture. Solutions :

  • Inliner la police comme URI de données base64 dans le CSS (fonctionne partout).
  • Attendre la promesse document.fonts.ready avant la capture (côté client).
  • Pour côté serveur (Puppeteer) : attendre networkidle0 avant la capture.

Images restreintes par CORS

Les images de domaines externes taguées crossOrigin="anonymous" peuvent être dessinées sur le canvas. Sans le tag (par défaut), dessiner lance “tainted canvas”, ton PNG de sortie ne peut pas être exporté.

Correctif : assure-toi que <img crossorigin="anonymous"> et que le serveur source renvoie Access-Control-Allow-Origin. Tes propres assets fonctionnent toujours.

Couleur de fond

Une sortie PNG transparente est super pour certains cas d’usage (composants UI, badges) mais désastreuse pour d’autres (l’aperçu social devient invisible sur le thème sombre de Twitter). Définis toujours explicitement le fond sauf si la transparence est désirée.

Résolution / DPI

Une capture ratio 1×1 d’un nœud DOM de 1200px de large est 1200×Y, bien pour les écrans normaux mais flou en retina. Multiplie par 2 (utilise scale: 2 dans html2canvas, ou 2×width dans puppeteer) pour une sortie retina nette.

Animation / contenu dynamique

La capture fige la frame courante. Si ton DOM a des spinners de chargement, des images lazy-loaded, ou des animations CSS, elles seront capturées en plein milieu. Solutions : attendre que les animations se stabilisent (setTimeout après requestAnimationFrame), forcer l’état final via une classe, ou pauser les animations programmatiquement avant la capture.

Confidentialité : quand le local compte

Les services de capture d’écran basés serveur (URL2PNG, Browserless, ScreenshotAPI, etc.) exécutent ton HTML sur leur infrastructure. Le HTML, l’image rendue, même les paramètres d’URL peuvent être loggés.

Pour du HTML contenant une UI sensible (dashboards d’admin avec des données réelles, outils internes, infos client), c’est un non-démarreur. Le correctif est le rendu côté client : le HTML reste dans le navigateur de l’utilisateur, est rendu là-bas, ne sort jamais.

DuneTools HTML en image fait ça, colle ton HTML, récupère du PNG, rien n’est loggé nulle part.

Référence rapide : quel outil selon le besoin

BesoinOutil
Conversion ponctuelle, pas d’infraDuneTools HTML en image
Capture de composant dans ta propre apphtml2canvas / dom-to-image
Images OG au buildsatori + resvg
Images OG dynamiques à la requête sur Edge@vercel/og
Côté serveur haute fidélité (pages complètes, PDF)Puppeteer / Playwright
Conversion batch programmatiquesatori (côté client) ou Puppeteer (serveur)

Exemples concrets

Images OG de blog statique : chaque article reçoit un PNG unique 1200×630 généré au build avec satori, avec le titre de l’article, l’auteur et la couleur d’accent.

PDF de reçus SaaS : rendre un template de facture HTML côté serveur avec Puppeteer, sauvegarder en PDF, attacher à un email.

Outil de capture interne : un dashboard de développeur a un bouton “Partager l’état” qui capture l’état de la page actuelle via html2canvas et l’upload sur S3, pour les rapports de bugs, le staff peut coller une capture précise de n’importe quelle vue.

Générateur code-vers-image : éditeur de code + colorateur syntaxique, quand l’utilisateur clique sur “Exporter”, lance html2canvas sur le bloc de code rendu, télécharge le PNG.

Automatisation marketing : images publicitaires dynamiques pour des campagnes payantes, au lieu de concevoir 200 variantes dans Figma, construis un template HTML, paramétrise via URL, rends en PNG à la requête.

Résumé

HTML en image est un problème résolu avec plusieurs bons outils, choisis par cas d’usage :

  • Besoin d’un PNG ponctuel de HTML arbitraire ? DuneTools HTML en image, zéro infra, instantané.
  • Construire une app qui doit capturer du contenu utilisateur ? html2canvas côté client.
  • Générer des images OG à grande échelle ? satori + resvg, au build ou sur Edge.
  • Besoin de fidélité serveur au pixel près ? Puppeteer.

La confidentialité compte : pour du HTML sensible (UIs admin, dashboards, outils internes), choisis toujours une option côté client qui ne transmet pas ton markup.