Convertir HTML en PNG

Q: Le PNG peut-il avoir un fond transparent au lieu de blanc ?

Oui. Activez **Fond transparent**. La transparence n'apparaît que là où la page ne définit aucune couleur de fond : un site dont le corps est blanc restera donc blanc. Cela fonctionne mieux pour un composant ou un badge isolé, conçu comme son propre fichier HTML.

Q: Comment créer une image du haut d'une longue page uniquement ?

Réglez **Images** sur une par page et **Pages** sur Première page. Vous obtenez la première section de la taille d'une page au lieu de la longueur complète. Pour la rogner ensuite au cadre exact, utilisez l'outil [recadrer une image](/crop-image).

Transformez une page web enregistrée, l'export d'un tableau de bord ou une maquette de composant en PNG où chaque lettre et chaque trait fin restent exactement tels que le navigateur les a dessinés. Choisissez la largeur de la fenêtre, la mise en page s'y adapte.

ou déposez Fichiers DOC, DOCX, DOCM … ici ·

95 Mo max. par fichier· Jusqu'à 20 fichiers· Supprimés après 30 minutes

Sortie

Convertir en

Résolution

Images

Les fichiers sont traités sur nos serveurs et supprimés après 30 minutes.

Comment utiliser cet outil

1
Ajoutez le fichier HTML
Importez des fichiers .html, .htm ou .mhtml, jusqu'à 20 par lot et 95 Mo chacun. Une page enregistrée en un seul fichier MHTML contient ses images et ses styles.
2
Réglez la largeur de la fenêtre
Largeur de la page HTML est réglée par défaut sur 1280 px. Choisissez 390 px pour une mise en page mobile ou 1920 px pour un tableau de bord large. Convertir en est déjà sur PNG et Images produit une seule image longue.
3
Convertissez en PNG
Cliquez sur Convertir en PNG. Activez Fond transparent dans Réglages avancés si la page n'a pas de couleur de fond propre et que l'image sera placée sur d'autres visuels.

Réponse

Comment convertir du HTML en PNG ?

Importez le fichier .html ou .mhtml, réglez Largeur de la page HTML sur l'écran que vous voulez imiter, puis cliquez sur Convertir en PNG. La page entière, une fois rendue, vous est rendue sous forme d'une seule image sans perte.

Convertir HTML en PNG quand le texte et les traits doivent rester nets

Le PNG est une recommandation du W3C depuis 1996 et utilise une compression sans perte : les bords lissés d'un texte de 14 px, les bordures de tableau d'un pixel et le code coloré par la syntaxe restent intacts. C'est pourquoi les développeurs joignent des captures PNG à leurs rapports de bugs et les designers les partagent en revue : personne n'a à se demander si un bord flou vient du CSS ou d'un artefact de compression.

Le revers, c'est le poids. Une page faite de texte et d'aplats de couleur se compresse bien ; une page remplie de photos, non. Si la capture part dans une discussion ou un e-mail où le poids compte plus que la netteté des détails, le JPG donne un fichier plus léger. Pour la documentation, les notes de version, les tableaux de bord et les chartes graphiques, le PNG est le choix par défaut le plus sûr.

La largeur détermine la mise en page. Le HTML n'a pas de page fixe : un même fichier affiche une mise en page de bureau à trois colonnes à 1280 px et une seule colonne empilée à 390 px. Le convertisseur met la page en forme à la Largeur de la page HTML que vous saisissez, de 320 à 3840 px, puis la capture de la première ligne au pied de page.

Largeurs du convertisseur HTML en PNG pour les écrans courants

195:422

390 × 844 px

Téléphone

Viewport CSS de nombreux iPhone récents ; affiche la mise en page mobile

41:59

820 × 1180 px

Tablette

iPad Air en mode portrait ; de nombreux sites changent de point de rupture autour de cette valeur

8:5

1280 × 800 px

Ordinateur portable

La largeur par défaut de ce convertisseur

16:9

1920 × 1080 px

Écran Full HD

Tableaux de bord larges et panneaux d'administration

HTML

HyperText Markup Language

HTML est le langage de balisage du web, décrit pour la première fois par Tim Berners-Lee au début des années 1990 et désormais maintenu par le WHATWG comme standard évolutif. Un fichier HTML décrit les titres, paragraphes, liens, tableaux, images et formulaires, tandis que la mise en forme provient en général du CSS. Tous les navigateurs l'affichent, et il sert aussi aux modèles d'e-mails et aux pages web enregistrées. Un fichier HTML seul dépend souvent d'images et de feuilles de style externes, et peut donc sembler cassé s'il est déplacé isolément.

Compression: –
Transparence: –
Animation: –
Année de création: 1993 · Tim Berners-Lee; maintained by WHATWG

Convertisseur HTML

PNG

Portable Network Graphics

Le PNG est un format d'image matricielle sans perte publié en 1996 par le PNG Development Group, puis normalisé par le W3C et l'ISO. Il conserve chaque pixel à l'identique, gère la transparence alpha complète et rend le texte, les contours nets et les aplats de couleur sans artefacts. Cette précision le rend idéal pour les captures d'écran, logos, icônes et éléments d'interface. Le revers est la taille : une photo enregistrée en PNG est souvent plusieurs fois plus lourde que la même en JPEG ou WebP. Tous les navigateurs, systèmes d'exploitation et éditeurs ouvrent les fichiers PNG.

Compression: Sans perte
Transparence: Oui
Animation: Non
Année de création: 1996 · PNG Development Group

Convertisseur PNG

On choisit le PNG quand la page est surtout composée de texte, de code, de tableaux ou d'éléments d'interface : les pixels sans perte gardent nets les traits fins et les petits caractères dans les documentations, les rapports de bugs et les revues de design, où les artefacts du JPG se verraient.

Convertir HTML en PNG sans perdre les styles ni les polices

Un simple fichier .html dépend souvent d'éléments stockés ailleurs : une feuille de style dans un dossier css, des images sur le serveur d'origine, des polices issues d'un service de polices. Quand ils manquent, la page retombe sur du texte sans style dans une police par défaut. Enregistrer la page dans Chrome ou Edge en tant que Page web, fichier unique produit un fichier .mhtml qui garde styles et images ensemble : c'est ce qu'il y a de plus fiable à importer.

Les polices web suivent la même règle. Une police déclarée avec @font-face ne se charge que si son fichier est accessible ; une police présente uniquement sur votre ordinateur est remplacée par une police proche. Si la typographie exacte compte, intégrez la police ou vérifiez le résultat avant de l'envoyer.

Une largeur fixe permet aussi de comparer côte à côte des captures hebdomadaires d'un rapport. Quand le résultat doit rester du texte sélectionnable pour l'impression, HTML en PDF est le format à utiliser à la place.

Questions sur la conversion HTML en PNG

Convertir HTML en PNG, est-ce mieux qu'une capture d'écran de mon navigateur ?

Une capture d'écran du navigateur ne saisit que ce qui tient à l'écran, sauf si vous utilisez un outil de capture pleine page, et sa largeur dépend de la taille de votre fenêtre. Ici, la largeur est une valeur que vous fixez : deux captures réalisées à plusieurs semaines d'intervalle s'alignent donc parfaitement, et toute la page est incluse, de la première ligne au pied de page.

Pourquoi le PNG pèse-t-il plusieurs fois plus que la même page en JPG ?

Le PNG conserve chaque pixel sans perte. Le texte et les aplats de couleur se compressent bien ainsi, mais pas les photos, les dégradés ni les affiches vidéo : une page d'accueil riche en photos peut donc donner un PNG volumineux. Pour ces pages, HTML en JPG est le choix le plus léger ; pour des extraits de code, des graphiques et des interfaces, le flou n'en vaut généralement pas la peine.

Le PNG peut-il avoir un fond transparent au lieu de blanc ?

Oui. Activez Fond transparent. La transparence n'apparaît que là où la page ne définit aucune couleur de fond : un site dont le corps est blanc restera donc blanc. Cela fonctionne mieux pour un composant ou un badge isolé, conçu comme son propre fichier HTML.

Le convertisseur exécute-t-il le JavaScript de la page ?

Le contenu qu'un script construit à l'ouverture de la page peut apparaître, mais pas ce qui attend un clic, un défilement ou une connexion. Si un graphique ou un tableau n'existe qu'après une interaction, ouvrez la page dans votre navigateur, laissez-la se charger, puis enregistrez-la en un seul fichier avant de l'importer.

Comment créer une image du haut d'une longue page uniquement ?

Réglez Images sur une par page et Pages sur Première page. Vous obtenez la première section de la taille d'une page au lieu de la longueur complète. Pour la rogner ensuite au cadre exact, utilisez l'outil recadrer une image.