HTML Minifier, Shrink HTML and See Bytes Saved

About the HTML Minifier

The HTML Minifier removes the whitespace and comments that a browser does not need, so the same page takes fewer bytes. Paste HTML into HTML and the compact version appears next to it as you type, with a note that gives the bytes before and after and the percentage saved. Four switches let you decide what gets removed, and Download .html saves the result.

Your HTML never leaves your device. The minifier runs in the page, so nothing is uploaded, logged or stored, and it is gone when you close the tab. The minifying code is only downloaded the first time you type, so the page stays light until you use it.

How to use it

The four options

• Remove whitespace around block tags removes the line breaks and indentation between block elements such as div, ul and section, where a browser shows no gap anyway.
• Collapse whitespace in text turns each run of spaces, tabs and line breaks inside text into a single space.
• Remove comments drops ordinary comments. Conditional comments, such as those older Internet Explorer pages use, are always kept.
• Trim whitespace inside tags removes extra spaces inside tags and around attribute values, so <a href = "x" > becomes <a href="x">.

Each option changes only its own kind of whitespace, so you can turn one off without affecting the others.

What is never touched

Content where whitespace matters is copied exactly: pre, textarea, script, style and title. A single space between two inline elements is kept, because <b>a</b> <i>b</i> and <b>a</b><i>b</i> look different on screen. Non-breaking spaces are kept as well. Nothing is renamed, reordered or rewritten, and attribute values are not changed apart from the spaces around them.

How the saving is measured

The note counts UTF-8 bytes, which is what a server sends, so an accented letter counts as 2 bytes and an emoji as 4. The percentage is

$\text{saved} = \frac{\text{bytes in} - \text{bytes out}}{\text{bytes in}} \times 100$

For example, <div>\n <p>Hi</p>\n</div> is 24 bytes and <div><p>Hi</p></div> is 20 bytes, so the saving is $\frac{24 - 20}{24} \approx 16.7\%$. Markup that is already compact shows No bytes saved. Servers usually also apply gzip or Brotli, which saves far more, but minifying first still helps.

Safe to repeat

Minifying the result again changes nothing, and the test suite checks that removing all whitespace from the input and from the output gives the same string, so no tag or word is lost. To read minified markup again, use the HTML Formatter, and to shrink a stylesheet use the CSS Minifier.

Frequently asked questions