# Convertisseur HTML en PNG

> Un outil gratuit en ligne qui transforme le HTML et le CSS que vous collez en image PNG ou JPEG, à la largeur, la hauteur et la densité de pixels que vous définissez.

Ce convertisseur HTML en PNG prend votre HTML et votre CSS pour obtenir un PNG du rendu, à la largeur, la hauteur et la densité de pixels choisies (1x à 3x). Ce convertisseur HTML en PNG est aussi un outil HTML en image : gardez l'arrière-plan du PNG transparent pour le placer sur autre chose, ou enregistrez un JPG avec une qualité de 1 à 100.

## Points clés

- Entrée : HTML et CSS, jusqu'à 256 KB.
- Sortie : PNG ou JPEG, densité de pixels 1x, 2x ou 3x ; un arrière-plan transparent ne fonctionne qu'en PNG.
- Limite de hauteur de l'outil gratuit : 2000 px.
- 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

- [Chrome DevTools Protocol: Page.captureScreenshot](https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-captureScreenshot)
- [W3C: Portable Network Graphics (PNG) Specification](https://www.w3.org/TR/png-3/)
- [JPEG committee: JPEG (ISO/IEC 10918)](https://jpeg.org/jpeg/)

Dernière vérification: 2026-10-15

## Fonctionnement

1. Collez votre HTML et votre CSS dans l'éditeur.
2. Définissez la largeur et la hauteur de la zone de l'image en pixels.
3. Choisissez PNG ou JPG. En PNG, vous pouvez garder l'arrière-plan transparent ; en JPG, vous pouvez régler la qualité.
4. Cliquez sur « Créer l'image » puis téléchargez le fichier.

## Fonctionnement de la conversion HTML en PNG et HTML en image

Le rendu s'effectue sur nos serveurs, et non dans votre navigateur. Chaque conversion utilise Chromium sans interface (headless) dans un contexte de navigation neuf, à l'intérieur d'un conteneur de travail aux ressources limitées, avec une durée maximale stricte.

## Taille de l'image et densité de pixels

La taille de l'image correspond à la largeur et à la hauteur que vous définissez, multipliées par la densité de pixels (1x, 2x ou 3x). Une zone de 640 x 340 en 2x donne une image de 1280 x 680 px.

## Arrière-plan transparent

Le PNG conserve la transparence là où votre page ne peint aucun arrière-plan. Si vous définissez une couleur d'arrière-plan sur html ou body, cette couleur remplace la transparence. Le JPEG n'a pas de transparence.

## PNG ou JPEG

Le PNG convient au texte, aux bords nets et aux images transparentes. Si vous voulez un JPG, par exemple pour une bannière en dégradé ou un fichier léger, la page HTML en JPG détaille la qualité, la taille du fichier et les arrière-plans. Le WebP n'est pas pris en charge ici : l'API renvoie une erreur si vous en demandez un ; l'outil PNG en WebP convertit un PNG que vous possédez déjà.

## Polices, images et scripts dans votre HTML

Les polices installées sur votre appareil ne sont pas disponibles sur le serveur de rendu. Chargez les autres polices avec @font-face depuis une adresse publique ou une URL de données.

Les images et les feuilles de style ne peuvent se charger que depuis des adresses publiques en http ou https. Le JavaScript s'exécute par défaut.

## Ce que l'on fait avec HTML en image

On s'en sert pour des cartes de partage, des bannières et des extraits de code affichés sous forme d'images.

## Conversion depuis du code

Envoyez une requête POST vers /v1/render avec votre HTML et output défini sur png ou jpeg. Authentifiez-vous avec votre clé API en jeton Bearer. L'API répond 202 avec un job_id.

Interrogez GET /v1/jobs/:id jusqu'à ce que le statut soit succeeded, failed ou timeout, puis téléchargez l'image depuis download_url. Ce lien est de courte durée. Les crédits des tâches échouées ou dont le délai est dépassé sont restitués.

## Transformer du code HTML en image

Si vous voulez une image d'un bloc de balisage, cet outil fonctionne comme un outil de code HTML en image. Collez le HTML et le CSS qui le met en forme, définissez la largeur et la hauteur, puis téléchargez l'image une fois prête.

L'image montre ce que le navigateur a dessiné à partir de votre code, et non le code lui-même. Si un style manque ou si une police n'est pas sur le serveur de rendu, l'image le montrera. Vérifiez le résultat avant de l'utiliser dans une publication ou un document.

## Utiliser le même HTML pour des bannières et des extraits

Beaucoup veulent un html en image pour une bannière, une carte ou un extrait de code dans un article. Réglez la taille sur la zone dont vous avez besoin dans la page, puis choisissez PNG si l'image contient du texte ou des bords nets.

Pour un JPG destiné à une bannière proche d'une photo, le même formulaire convient : choisissez JPG (JPEG) dans la liste des formats. La page HTML en JPG détaille la qualité, la taille du fichier et les arrière-plans.

## HTML en PNG en ligne

Pour html en png en ligne, collez votre HTML et votre CSS, définissez la largeur et la hauteur, choisissez PNG et cliquez sur « Créer l'image ». Ce convertisseur html en png dessine la page dans Chromium sans interface (headless), vous pouvez donc convertir du HTML en PNG sans installer d'extension de navigateur ni d'outil en ligne de commande.

Un PNG obtenu ainsi garde la transparence là où votre page ne peint aucun arrière-plan, ce qui le rend utile pour des badges, des autocollants et des cartes posés sur d'autres visuels.

## Une page HTML entière ou un seul élément en image

Une conversion de page HTML en image fonctionne mieux lorsque vous collez un document complet, bloc de style compris. L'outil dessine le HTML que vous collez, et non un site en direct. Pour capturer une page à partir de son adresse, utilisez l'outil de capture d'écran de site web.

Pour transformer un seul élément HTML en image, collez uniquement cet élément et son CSS, puis réglez la largeur et la hauteur pour qu'elles correspondent. L'API propose aussi une option clip qui prend un rectangle (x, y, width, height).

## Questions

### Quelle sera la taille de l'image ?

La largeur multipliée par la hauteur, en pixels, puis multipliée par la densité de pixels. En 2x, une zone de 640 x 340 donne une image de 1280 x 680 px. L'outil gratuit accepte des hauteurs allant jusqu'à 2000 px et des largeurs de 100 à 4000 px.

### Comment obtenir un arrière-plan transparent ?

Choisissez PNG et laissez l'option « Arrière-plan transparent » activée. Votre page ne doit pas peindre son propre arrière-plan sur html ou body. Le JPEG n'a pas de transparence.

### Le HTML peut-il charger des images et des polices externes ?

Les adresses publiques en http et https peuvent être chargées pendant le rendu. Les adresses privées et locales sont bloquées volontairement. Les URL de données fonctionnent sans aucune requête réseau.

### Le JavaScript est-il exécuté ?

Oui. L'image est capturée après le chargement de la page. L'API propose des options d'attente pour les pages qui se terminent plus tard.

### Peut-on ne capturer qu'une partie de la page ?

L'API propose une option clip qui prend un rectangle (x, y, width, height). L'outil gratuit capture la zone de fenêtre que vous définissez.

### Le WebP est-il pris en charge ?

Pas encore. La sortie est au format PNG ou JPEG.

### Combien de temps l'image est-elle conservée ?

Les résultats de l'outil en ligne sont supprimés après 10 minutes. Téléchargez-la avant.

### Comment convertir du HTML en PNG ?

Collez votre HTML et votre CSS dans l'éditeur, définissez la largeur et la hauteur, et choisissez PNG. Cliquez sur « Créer l'image », puis téléchargez le fichier. Les résultats de l'outil en ligne sont supprimés après 10 minutes.

### Peut-on convertir un fichier HTML ?

L'outil prend du HTML et du CSS collés, et non un fichier importé. Ouvrez votre fichier dans un éditeur de texte, copiez son contenu et collez-le.

### Pourquoi mon image est-elle floue ?

L'image est capturée à la densité de pixels que vous choisissez. En 1x, chaque pixel CSS devient un pixel de l'image, ce qui peut paraître flou sur les écrans à haute densité. Choisissez 2x ou 3x pour une image plus nette.

### Peut-on transformer une page web en direct en image avec cet outil ?

Non. Cet outil prend du HTML et du CSS que vous collez. Pour capturer une page web à partir de son adresse, utilisez l'outil de capture d'écran de site web. Seules les adresses publiques en http ou https peuvent se charger pendant la création de l'image, donc les adresses privées ou locales n'y apparaîtront pas.

### Peut-on transformer un seul élément HTML en image ?

Oui. Collez uniquement cet élément et le CSS qui le met en forme, puis réglez la largeur et la hauteur de la zone de l'image pour qu'elle s'y adapte. Avec l'API, vous pouvez à la place effectuer le rendu de la page entière et utiliser l'option clip pour découper un rectangle.

### Les textes en chinois, japonais, coréen et les emojis apparaissent-ils dans l'image ?

Oui, lors de notre test. Le 2026-10-11, nous avons généré un PNG d'une page contenant du chinois simplifié et traditionnel, du japonais, du coréen et des emojis : chaque caractère s'affichait sous forme de texte ou d'emoji en couleur, et non de case vide. Le serveur les dessine avec Noto Sans CJK et Noto Color Emoji. Pour une police de votre choix, chargez-la avec @font-face depuis une adresse publique ou une URL de données.

## Liées

- [Outil de capture d'écran site web](https://aiipworld.com/fr/tools/capture-d-ecran-site-web/index.md)
- [Image open graph](https://aiipworld.com/fr/tools/image-open-graph/index.md)
- [Convertir HTML en PDF](https://aiipworld.com/fr/tools/html-en-pdf/index.md)
- [Code en image](https://aiipworld.com/fr/tools/code-en-image/index.md)
- [Générateur de texte en PNG](https://aiipworld.com/fr/tools/texte-en-png/index.md)
- [Convertir SVG en PNG en ligne : collez le code SVG ou ouvrez un fichier](https://aiipworld.com/fr/tools/svg-en-png/index.md)
- [Capture d'écran défilante](https://aiipworld.com/fr/tools/capture-d-ecran-defilante/index.md)
- [HTML email preview : aperçu d'e-mail HTML en ligne](https://aiipworld.com/fr/tools/html-email-preview/index.md)
- [Maquette site web](https://aiipworld.com/fr/tools/maquette-site-web/index.md)
- [App store screenshot generator](https://aiipworld.com/fr/tools/app-store-screenshot-generator/index.md)
- [Convertisseur PNG en WebP](https://aiipworld.com/fr/tools/png-en-webp/index.md)
- [Convertir WebP en PNG : convertissez votre image en ligne](https://aiipworld.com/fr/tools/webp-en-png/index.md)
- [Convertir HTML en JPG](https://aiipworld.com/fr/tools/html-en-jpg/index.md)

Page : https://aiipworld.com/fr/tools/html-en-png/