Aller au contenu
fr
Tous les outils

Catégories

Outils développeurEncodage & décodageJSON & donnéesHash & checksumOutils de texteDate & heureOutils réseauOutils de fichiersMarkdown & diagrammes

Minifieur HTML

Allégez votre HTML avec un minifieur prudent qui laisse intact le contenu de <pre>, <textarea> et <script>.

Traité localement dans votre navigateur

Options
0 caractères · 0 lignes
Le résultat apparaîtra ici.

Qu'est-ce que Minifieur HTML ?

Minifier du HTML consiste à retirer les octets inutiles aux navigateurs : commentaires, indentation et sauts de ligne entre les balises. Des documents plus légers se téléchargent et s’analysent plus vite, ce qui compte pour les pages d’atterrissage et les gabarits d’e-mail.

Ce minifieur est volontairement sûr. Il supprime les commentaires (en conservant si besoin les commentaires conditionnels IE), réduit toute suite d’espaces à un seul espace et le retire près des balises de type bloc, mais laisse tel quel le contenu de <pre>, <textarea>, <script> et <style>. Une option retire aussi espaces et commentaires du CSS en ligne. Le résultat affiche la taille avant et après.

Comment ça marche ?

  1. Collez votre HTML dans la zone de saisie.
  2. Choisissez de supprimer les commentaires, de garder les commentaires conditionnels IE et de réduire les espaces.
  3. Activez si besoin la minification du CSS en ligne pour les blocs <style> et les attributs style.
  4. Consultez la taille économisée, puis copiez ou téléchargez le HTML minifié.

Cas d'usage courants

  • Alléger une page d’atterrissage statique ou un e-mail HTML.
  • Intégrer un petit extrait HTML dans une chaîne JavaScript ou une URL de données.
  • Retirer les commentaires de développement avant de publier un gabarit.
  • Estimer la quantité d’espaces que contient une page avant de mettre en place une étape de build.

Exemples

Essayez cette saisie dans l'outil ci-dessus :

Entrée
<!DOCTYPE html>
<html>
  <head>
    <!-- page title -->
    <title>Demo</title>
    <style>
      body { margin: 0; /* reset */ }
      p    { color: #333; }
    </style>
  </head>
  <body>
    <!--[if IE]><p>Old browser</p><![endif]-->
    <h1>  Hello   <em>world</em>  </h1>
    <pre>  keep
    this   spacing </pre>
  </body>
</html>
Sortie
<!DOCTYPE html><html><head><title>Demo</title><style>
      body { margin: 0; /* reset */ }
      p    { color: #333; }
    </style></head><body><!--[if IE]><p>Old browser</p><![endif]--><h1>Hello <em>world</em></h1><pre>  keep
    this   spacing </pre></body></html>

Confidentialité

Minifieur HTML s'exécute entièrement dans votre navigateur. Le texte ou les fichiers que vous fournissez sont traités sur votre appareil et ne sont ni envoyés, ni journalisés, ni stockés sur nos serveurs.

Limites

Il ne réécrit ni attributs ni guillemets, ne supprime pas les balises optionnelles et ne minifie pas le JavaScript : le gain est donc moindre qu’avec les minifieurs agressifs, et un espace unique entre éléments en ligne est volontairement conservé.

Questions fréquentes

La minification risque-t-elle de casser ma page ?

Les règles sont prudentes : texte préformaté, zones de texte, scripts et styles restent tels quels. Les espaces entre éléments en ligne sont ramenés à un seul espace, pas supprimés, pour que les mots ne se collent pas.

Que deviennent les commentaires conditionnels ?

Avec « conserver les commentaires conditionnels IE », les commentaires du type <!--[if IE]>…<![endif]--> sont préservés, car les navigateurs les interprètent. Désactivez l’option pour les supprimer aussi.

Minifie-t-il le JavaScript ?

Non. Le contenu des scripts est copié sans modification. Utilisez un minifieur JavaScript dédié dans votre build si vous en avez besoin.

Outils associés

Plus d'outils dans Outils développeur →