HTML en image — convertir HTML et CSS en PNG
Affiche le HTML et le CSS collés et les capture en PNG à la largeur et à l’échelle choisies
Traitement dans le navigateur · aucun envoi de fichier
Collez un fragment (<div>…) ou un document complet (<html>…). Pour un document complet, seuls le contenu de <body> et les blocs <style> sont utilisés.
Styles à ajouter. Les blocs <style> présents dans le HTML s’appliquent aussi.
Le contenu est mis en page à cette largeur (px) et capturé sur toute sa hauteur. De 100 à 4000.
2× est net comme un écran Retina, 3× convient à l’impression. Le nombre de pixels croît avec le carré de l’échelle.
Pour la sécurité et la confidentialité, les images, polices et CSS situées à une autre adresse que data: ou blob: ne sont jamais demandées, ni dans l’aperçu ni pendant la capture, et les scripts ne s’exécutent jamais. Le texte utilise les polices installées sur votre appareil.
Aperçu
Saisissez du HTML pour voir l’aperçu.
Que fait l’outil ?
Il enregistre un morceau de HTML et de CSS, comme une carte, un avis, un tableau, un bouton ou une bannière d’e-mail, en image PNG. Utilisez-le pour montrer un rendu dans une documentation ou un article de blog, composer en code une carte d’annonce pour les réseaux sociaux, ou partager une partie d’un design sous forme d’image. Contrairement à une capture d’écran recadrée, vous obtenez une largeur et une échelle exactes.
Mode d’emploi
- Collez du code dans HTML : un document complet (
<html>…) ou un simple fragment. Pour découvrir l’outil, cliquez sur Insérer un exemple. - Ajoutez si besoin des styles dans CSS (facultatif). Les blocs
<style>du HTML s’appliquent aussi. - Réglez la Largeur de capture (px), l’Échelle (1×, 2×, 3×) et le Fond (blanc ou transparent).
- Vérifiez l’aperçu, cliquez sur Créer le PNG, puis sur Enregistrer le PNG.
Fonctionnement
- Aperçu sécurisé : le code est affiché dans une iframe isolée (sandbox). Le bac à sable empêche l’exécution des scripts, et une Content Security Policy bloque toute requête réseau hors adresses data: et blob:.
- Adresses externes supprimées : le code collé est d’abord lu par les analyseurs HTML et CSS du navigateur (rien n’est chargé à cette étape). Toute adresse autre que data: ou blob: dans src, srcset, poster, href SVG, attributs style,
<style>, url(), image-set(), @import et @font-face est supprimée et listée pour vous. Juste avant la capture, l’aperçu est vérifié à nouveau, et pendant la capture seules les adresses data: et blob: peuvent être lues : aucune requête ne part donc vers une adresse extérieure. Les liens (<a href>) n’influent pas sur l’image et ne sont donc pas listés ; ils sont modifiés pour qu’un clic ne mène nulle part. - Taille de capture : le contenu est mis en page à la largeur choisie et capturé sur sa hauteur réelle. Le PNG mesure largeur × échelle sur hauteur × échelle.
- Limite de taille : au-delà de ce que le navigateur peut traiter (16 777 216 pixels sur iPhone et iPad, 16 384 px par côté), l’échelle est automatiquement abaissée et la page le signale.
- Documents complets : seuls le contenu de
<body>et tous les blocs<style>sont utilisés ; les autres balises du<head>sont ignorées. - La capture utilise html-to-image (licence MIT).
Exemples
| Entrée | Réglages | Résultat |
|---|---|---|
| La carte d’avis de l’exemple | Largeur 800, 2× | PNG de 1600 px de large |
Un <table> avec du CSS |
Largeur 600, 3×, transparent | PNG de 1800 px de large, fond transparent |
| Code avec une image externe | Largeur 800, 1× | L’image externe reste vide ; les adresses bloquées sont listées |
Pour les dessins vectoriels, utilisez SVG en PNG ; pour le Markdown, essayez l’aperçu Markdown.
Questions fréquentes
Puis-je capturer un site à partir de son URL ?
Non. Capturer un autre site exige un serveur qui ouvre la page à votre place, ce que cet outil ne fait pas. Collez du HTML et du CSS que vous avez écrits ou copiés depuis les outils de développement de votre navigateur.
Des images manquent.
Pour la sécurité et la confidentialité, les images, polices et CSS situées à une autre adresse que data: ou blob: (http, https, // et chemins relatifs) ne sont jamais chargées. Les adresses masquées par des références de caractères HTML ou des échappements CSS sont vérifiées telles que le navigateur les décode, elles sont donc bloquées elles aussi. L’outil liste les adresses bloquées ; intégrez les images sous forme d’adresses data: (Base64) et elles apparaîtront. L’outil Image en Base64 permet de les créer.
La police ne ressemble pas à ma maquette.
Les fichiers de polices Web ne sont pas récupérés : le texte utilise les polices installées sur votre appareil. Si la police indiquée est absente, la police système par défaut est utilisée (par exemple Segoe UI sous Windows, San Francisco sur les appareils Apple).
Le contenu généré par JavaScript apparaît-il ?
Non. Les scripts du code collé ne sont pas exécutés ; seuls le HTML et le CSS statiques sont dessinés.
Mon code est-il envoyé à un serveur ?
Non. L’aperçu et l’image sont tous deux créés dans votre navigateur.
