HTML Minifier

The HTML Minifier shrinks markup by deleting comments and the whitespace between tags. It is aimed at static pages, landing pages and HTML emails where you edit a readable copy and publish a compact one. The minifier applies four simple text rules, so it is easy to predict what it will change.

Example with the size saving

This 103-character menu snippet:

<!-- Price list -->
<ul>
    <li>Tea: ₹20</li>
    <li>Coffee: ₹35</li>
    <li>Samosa: ₹15</li>
</ul>

becomes 66 characters, roughly 36% smaller:

<ul><li>Tea: ₹20</li><li>Coffee: ₹35</li><li>Samosa: ₹15</li></ul>

The comment and the indentation carried no information for the browser, and the list renders exactly as before. On a real page with deep nesting, indentation alone often accounts for a large share of the file.

The four rules

1. All <!-- … --> comments are removed, including old Internet Explorer conditional comments.
2. Whitespace between a closing > and the next < is removed completely.
3. Any other run of two or more whitespace characters becomes one space.
4. Leading and trailing whitespace of the whole document is trimmed.

Attributes, quotes, optional closing tags and inline CSS or JavaScript are otherwise left as they are.

Three things that can break

Words that run together

Rule 2 also removes meaningful spaces between inline elements. <p>Hello <b>big</b> <i>world</i></p> becomes <p>Hello <b>big</b><i>world</i></p>, which displays as "Hello bigworld". The same applies to two links or buttons separated only by a space. Put the space inside one of the elements, or use CSS margins, before minifying.

Preformatted text

Indentation inside <pre> and <textarea> is collapsed, so code samples and poems lose their layout.

Inline scripts with // comments

A newline followed by indentation counts as two or more whitespace characters and becomes a single space. In var a = 1; // set a followed by an indented alert(a);, both lines merge, so the alert is swallowed by the comment. Move inline scripts to a separate file, or use /* */ comments, and compress that file with the JavaScript Minifier.

Minifying HTML emails

Gmail clips messages whose HTML is larger than about 102 KB and hides the rest behind a "View entire message" link, which can also hide an unsubscribe link or tracking pixel at the bottom. Removing comments and indentation from a large newsletter template is a quick way to get under that limit. Send yourself a test afterwards, since email clients are strict about spacing between inline elements.

The minification runs in your browser. Keep the formatted original for editing; if you only have the compressed copy, the HTML Formatter will make it readable again, though deleted comments cannot be recovered.