Convertisseur HTML en PNG
Transformez du code HTML en image PNG téléchargeable. Collez du balisage ou importez un fichier, prévisualisez-le et exportez une capture nette instantanément, le tout dans votre navigateur.
100% Traitement côté client
Votre HTML est rendu et converti entièrement dans votre navigateur. Rien n'est envoyé à un serveur.
Aperçu
Par sécurité, les balises <script> sont désactivées dans l'aperçu et l'export. Les styles (CSS) et les images s'affichent normalement.
Table des matières
Qu'est-ce qu'un convertisseur HTML en PNG ?
Un convertisseur HTML en PNG prend du balisage HTML et CSS et le restitue sous la forme d'une seule image matricielle, prête à être téléchargée, intégrée ou partagée, comme une capture d'écran de code sans ouvrir un véritable onglet de navigateur.
Il est utile pour transformer des cartes, bannières, aperçus pour réseaux sociaux, extraits de code ou tout contenu web stylisé en un fichier image net et portable, sans avoir besoin d'un outil de design, d'une extension de capture d'écran ou d'un service de rendu côté serveur.
Comment ça fonctionne
- Ajoutez votre HTML : Collez du HTML/CSS directement, ou importez un fichier .html.
- Prévisualisez-le : L'outil rend votre balisage en direct dans un aperçu isolé à la largeur de capture choisie.
- Choisissez les paramètres d'image : Sélectionnez la largeur de capture, la résolution (1x/2x/3x) et un arrière-plan transparent, blanc ou personnalisé.
- Convertissez et téléchargez : L'aperçu est rastérisé en pleine qualité, puis regroupé dans un PNG téléchargeable.
Fonctionnalités
- Collez du HTML ou importez un fichier .html
- Aperçu en direct de type WYSIWYG à la largeur de capture réelle
- Largeur de capture ajustable en pixels
- Résolution 1x, 2x et 3x pour des images nettes prêtes pour la retina
- Arrière-plan transparent, blanc ou de couleur personnalisée
- Une seule image en pleine hauteur, sans pagination
- Traitement 100% côté client pour la confidentialité
Bonnes pratiques
- Utilisez du CSS en ligne ou intégré : Placez les styles dans une balise <style> ou des attributs en ligne pour que l'aperçu s'affiche exactement comme prévu.
- Utilisez des data URIs pour les images essentielles : Les images cross-origin sans en-têtes CORS peuvent ne pas s'afficher ; intégrez les petites images en base64 quand c'est possible.
- Choisissez une largeur adaptée à l'usage : Adaptez la largeur de capture à l'endroit où l'image sera utilisée (par exemple 1200px pour les cartes sociales, 600px pour les graphiques d'e-mail).
- Utilisez un fond transparent pour les superpositions : Choisissez transparent lorsque le PNG sera placé sur un autre arrière-plan, comme une maquette d'interface ou un logo.
- Testez d'abord avec l'exemple : Chargez le HTML d'exemple pour voir un cas fonctionnel avant de coller votre propre balisage.
Dépannage
Des images manquent dans le PNG
Les images externes hébergées sur d'autres domaines sans en-têtes CORS appropriés ne peuvent pas être capturées. Utilisez des images de même origine ou convertissez-les en data URIs base64.
L'arrière-plan n'est pas transparent
Assurez-vous que « Transparent » est sélectionné dans Arrière-plan avant de convertir ; les options « Blanc » et « Couleur personnalisée » remplissent le canevas d'une couleur unie.
La conversion échoue ou prend trop de temps
Des documents très volumineux ou du CSS complexe (dégradés, filtres lourds) peuvent être lents. Essayez de simplifier le balisage ou de réduire la largeur de capture.
Les polices semblent différentes dans le PNG
Le convertisseur utilise les polices disponibles dans votre navigateur. Les polices web chargées via @font-face depuis des domaines externes peuvent ne pas toujours être capturées ; utilisez des polices système pour une cohérence garantie.
Cas d'utilisation courants
- Cartes pour réseaux sociaux : Concevez une mise en page de carte Open Graph ou Twitter en HTML et exportez-la sous forme d'image PNG partageable.
- Captures de code et de terminal : Stylisez un bloc de code ou une sortie de terminal et exportez une image propre pour la documentation ou les publications.
- Graphiques pour e-mail : Transformez une bannière ou un bouton HTML stylisé en PNG statique pour les clients e-mail qui suppriment le HTML dynamique.
- Maquettes et badges d'interface : Exportez un petit composant stylisé avec un arrière-plan transparent pour le superposer à d'autres designs.
- Images pour blog et README : Convertissez un extrait HTML formaté en image à intégrer dans une documentation Markdown.
Questions fréquentes
Oui. Votre HTML est rendu et converti entièrement dans votre navigateur et n'est jamais envoyé à un serveur.
Non. Les balises script sont désactivées dans l'aperçu et l'export par sécurité, donc les scripts interactifs ne s'exécuteront pas.
Oui. Choisissez « Transparent » dans Arrière-plan pour exporter un PNG avec un canal alpha, idéal pour les superpositions et les logos.
Utilisez 1x pour les écrans standards, 2x pour les écrans retina ou haute densité, et 3x pour le rendu le plus net possible (fichier plus volumineux).
Vous pouvez coller un document HTML complet (avec <html>, <head> et <body>) ou un fragment HTML plus petit. Les deux sont pris en charge.
Les images chargées depuis d'autres domaines sans support CORS ne peuvent pas être capturées pour des raisons de sécurité du navigateur. Utilisez des images de même origine ou des data URIs base64.
Non. Tout se passe localement dans votre navigateur et le PNG est téléchargé directement sur votre appareil.