Comment convertir des slides HTML en PPTX en gardant le design

Mis à jour: 2026-10-14 · Équipe Dawwerni

Pour convertir des slides HTML en PPTX sans perdre le design, construisez chaque slide comme un élément fixe de 1920x1080 px, chargez les polices web avant la capture, évitez les unités vw et vh dans les slides, faites de l'état final des animations le style par défaut et placez les notes dans un élément aside de classe notes. Chaque slide devient alors une image pleine page dans un PowerPoint 16:9.

Pourquoi les slides HTML se cassent souvent dans PowerPoint

Une présentation HTML est une page web qui ressemble à des slides. Elle s'adapte à la fenêtre du navigateur, attend des polices venues d'un CDN et fait souvent apparaître le contenu au clic ou au défilement. PowerPoint fonctionne à l'inverse : une slide est un canevas fixe de 13,333 x 7,5 pouces (le format large 16:9), et ce qui s'y trouve au moment de l'export est ce que votre public verra.

Convertir revient donc à figer une page mobile et redimensionnable en images fixes. Si le deck a été pensé pour cela, le résultat est fidèle au pixel près. Sinon, vous obtenez des titres coupés, des polices de secours, des graphiques vides ou des puces bloquées à mi-fondu. Les cinq règles ci-dessous font la différence, que vous codiez le deck à la main, utilisiez reveal.js ou demandiez à un assistant IA de le générer avant de le passer dans notre convertisseur HTML en PPTX gratuit.

Règle 1 : placer chaque slide sur une scène fixe de 1920x1080

C'est la règle la plus importante. Donnez à chaque slide la même taille fixe en pixels CSS, 1920x1080 (ou 1280x720, même ratio 16:9), et masquez tout ce qui déborde. Une scène fixe s'affiche de la même façon dans une petite fenêtre de portable, sur un écran 4K et dans un convertisseur.

.slide {
  width: 1920px;
  height: 1080px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  padding: 120px 160px;
}

Un élément prévisible par slide

Les convertisseurs cherchent des repères. L'outil HTML en PPTX détecte les decks reveal.js, les éléments de classe slide, les sections de 1920x1080 ou 1280x720 et les sauts de page CSS. Chaque slide détectée devient exactement une slide PowerPoint. Sans aucun de ces repères, la page est traitée comme un long document et découpée en pages, ce qui convient rarement à une présentation.

Si vous voulez aussi que le deck tienne sur un petit écran quand on ouvre directement le fichier HTML, mettez toute la scène à l'échelle avec une transformation CSS via un court script, au lieu de rendre la slide fluide. La slide garde sa mise en page 1920x1080 ; seul l'aperçu à l'écran est réduit.

Règle 2 : vérifier que les polices sont chargées avant la capture

Une slide conçue en Inter ou Poppins et capturée en Arial saute aux yeux : les lignes se coupent ailleurs, les titres débordent, l'alignement se décale. Les polices web se chargent de façon asynchrone, donc une capture trop rapide utilise la police de secours.

• Chargez Google Fonts avec une balise link dans le head, avec les indications preconnect, plutôt qu'avec un @import en fin de feuille de style.
• Gardez display=swap dans l'URL pour que le texte ne soit jamais invisible pendant le chargement.
• Pour des polices hébergées vous-même, utilisez des chemins relatifs et gardez les fichiers à côté du HTML ; mettez le tout dans un .zip pour que le convertisseur résolve les chemins.
• Choisissez une pile de secours de largeur proche (par exemple Inter, puis system-ui, puis sans-serif) pour limiter les dégâts si une police ne se charge pas.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

Attendre les polices dans vos propres scripts

Notre convertisseur attend les polices et les images du document avant de capturer, et vous pouvez ajouter quelques secondes d'attente pour les pages qui se construisent par script. Si votre deck mesure du texte en JavaScript (pour ajuster des titres, par exemple), exécutez ce code après la résolution de document.fonts.ready.

document.fonts.ready.then(() => {
  document.body.classList.add('fonts-loaded');
});

Règle 3 : pas d'unités liées au viewport dans une slide

Les unités vw, vh et vmin lient les tailles à la fenêtre du navigateur : la slide se recompose dès que la fenêtre change. Au moment de la capture, la fenêtre est celle du convertisseur, pas votre écran, et un titre à 6vw peut sortir bien plus grand ou plus petit que prévu.

Dans une scène fixe, utilisez des px (ou des rem avec une taille racine fixe) pour le texte, les espacements et les positions. clamp() avec une valeur centrale en vw pose le même problème : réservez-le aux sites responsive, pas aux slides.

/* Fragile: depends on the browser window */
.slide h1 { font-size: 6vw; }
.slide .hero { height: 100vh; }

/* Stable: depends only on the 1920x1080 stage */
.slide h1 { font-size: 112px; }
.slide .hero { height: 100%; }

• Une grille comme repeat(3, 1fr) ne pose pas de problème, car la largeur de la scène est fixe.
• Les media queries qui passent sur une colonne sous une certaine largeur sont un piège : elles réagissent à la fenêtre, qui peut être plus étroite que la slide.
• Les pourcentages conviennent quand ils se rapportent à la slide (height: 100% d'une slide de 1080 px), pas au viewport.

Règle 4 : pas d'animation au moment de la capture

Les animations d'entrée sont la cause la plus fréquente de slides vides ou à moitié transparentes. Les bibliothèques et les decks générés par IA démarrent souvent les éléments à opacity 0 et les font apparaître quand la slide devient active ou entre dans l'écran. Une capture prise au mauvais moment enregistre l'état de départ.

Notre convertisseur fige les animations et transitions CSS dans leur état final et fait défiler la page pour révéler le contenu au scroll. Vous rendez cela fiable en écrivant les animations de sorte que l'état visible soit le style normal de l'élément et que seule l'image de départ soit animée :

/* The visible state is the default; only the "from" frame is animated */
@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
}
.slide .bullet { animation: rise 0.6s ease-out both; }

/* No motion when printing or for users who ask for less motion */
@media print, (prefers-reduced-motion: reduce) {
  .slide * { animation: none !important; transition: none !important; }
}

• Évitez le contenu qui n'apparaît que lorsque JavaScript ajoute une classe après un clic ou un minuteur : si la classe n'est jamais ajoutée, l'élément reste caché.
• PowerPoint ne rejouera pas vos animations CSS. Si un point doit apparaître étape par étape, répartissez-le sur plusieurs slides.
• Graphiques : désactivez les animations de Chart.js (animation: false dans les options) pour que le graphique soit complet dès qu'il est dessiné.

Règle 5 : écrire les notes dans un aside de classe notes

reveal.js a popularisé une convention simple : les notes de l'orateur se trouvent dans un élément aside de classe notes, à l'intérieur de la slide concernée. L'export PPTX de notre convertisseur lit ces éléments et place leur texte dans les notes PowerPoint de la slide correspondante, visibles en mode Présentateur.

<section class="slide">
  <h2>Revenue grew 18% in Q3</h2>
  <p>Driven by repeat customers in two regions.</p>
  <aside class="notes">
    Mention the July pricing change. Source: finance dashboard, 30 Sept.
  </aside>
</section>

.slide .notes { display: none; }

Pourquoi les notes valent la peine

Hors de reveal.js, le navigateur affiche l'aside comme n'importe quel élément : masquez-le avec la règle CSS ci-dessus. Les notes sont du texte, elles restent donc modifiables dans PowerPoint même si la slide est une image. C'est l'endroit idéal pour vos arguments, vos sources et les chiffres que vous voudrez peut-être ajuster plus tard.

Un deck minimal qui se convertit proprement

Voici un deck complet de deux slides qui respecte les cinq règles. Enregistrez-le sous deck.html et ouvrez-le dans un navigateur : les slides s'empilent verticalement à l'écran et chacune devient exactement une slide PowerPoint. Le bloc print permet aussi à Imprimer / Enregistrer en PDF de Chrome ou Edge de produire une page 16:9 par slide, fond sombre conservé.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Q3 review</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
<style>
  * { box-sizing: border-box; margin: 0; }
  body { background: #e5e7eb; font-family: 'Inter', system-ui, sans-serif; }
  .slide {
    width: 1920px; height: 1080px; position: relative; overflow: hidden;
    padding: 120px 160px; margin: 0 auto 40px;
    background: #0f172a; color: #f8fafc;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .slide h1 { font-size: 112px; line-height: 1.05; }
  .slide h2 { font-size: 72px; margin-bottom: 48px; }
  .slide p, .slide li { font-size: 40px; line-height: 1.4; }
  .slide ul { padding-left: 48px; }
  .slide .notes { display: none; }
  @media print {
    @page { size: 1920px 1080px; margin: 0; }
    body { background: none; }
    .slide { margin: 0; break-after: page; }
  }
</style>
</head>
<body>
  <section class="slide">
    <h1>Q3 review</h1>
    <p>Sales team, October</p>
    <aside class="notes">Welcome everyone, 20 minutes plus questions.</aside>
  </section>
  <section class="slide">
    <h2>Three things to remember</h2>
    <ul>
      <li>Revenue up 18%</li>
      <li>Churn down to 3.1%</li>
      <li>Two new regions open</li>
    </ul>
    <aside class="notes">Pause after each point.</aside>
  </section>
</body>
</html>

PPTX ou PDF pour présenter ?

Soyons clairs sur le résultat. Dans le PPTX, chaque slide est une image pleine page : c'est pour cela qu'elle ressemble exactement au HTML, mais le texte de la slide n'est pas modifiable. Un PDF produit par le moteur d'impression du navigateur garde un texte sélectionnable et consultable, mais sans notes de l'orateur.

• Vous modifiez souvent le texte ? Refaites les slides chargées en texte dans PowerPoint et gardez les images converties pour les graphiques, schémas et illustrations.
• Vous partagez seulement pour lecture ? Utilisez le convertisseur HTML en PDF ou suivez notre guide pour convertir du HTML en PDF gratuitement.

Convertir le deck, étape par étape

1. Enregistrez le deck dans un seul fichier .html, ou zippez-le avec ses images, CSS et polices s'il utilise des chemins relatifs.
2. Ouvrez le convertisseur HTML en PPTX et déposez le fichier ou collez le code. Rien n'est envoyé : la conversion se fait dans votre navigateur, sans inscription ni filigrane.
3. Vérifiez que l'aperçu affiche le nombre de slides attendu. Sinon, vos slides ne sont probablement pas balisées en éléments .slide ou en sections 16:9 fixes.
4. Si le deck utilise le CDN Tailwind ou Chart.js, augmentez le temps d'attente de quelques secondes pour laisser les styles et graphiques se terminer.
5. Téléchargez le .pptx, ouvrez-le dans PowerPoint et vérifiez vos notes en mode Présentateur.

Deux limites à connaître : les images chargées depuis d'autres sites qui n'envoient pas d'en-têtes CORS peuvent manquer dans le PPTX (mettez-les plutôt dans le zip), et les canevas WebGL ou les images de vidéo peuvent sortir vides.

Si le deck vient d'un assistant IA, le guide artefact Claude vers PowerPoint explique comment demander cette structure dès le départ, et le guide des problèmes HTML en PDF détaille les polices, graphiques et arrière-plans.