HTML Minifier

HTML Minifier walks your markup character by character instead of building a DOM, which is why a loose fragment works as readily as a complete document and why nothing it fails to recognise gets rewritten. Comments go, runs of whitespace between elements collapse to a single space, and the space beside a tag on its structural list — the block elements, plus br, iframe, video and canvas — is dropped entirely. The summary reports the UTF-8 size before and after with the percentage saved, measured on your own markup rather than quoted from an average — and measured here, in this browser tab, because the minifier is plain JavaScript on the page and the input is never uploaded.

Several things are deliberately left alone. The bodies of <pre> and <textarea> pass through byte for byte, so preformatted code keeps its indentation and a filled-in text box keeps its line breaks. Attribute values keep their spacing, their quoting and their case, so an alt text written across two lines stays as written, and the space in <img src=x /> is kept because removing it would join an unquoted value to the closing slash. Conditional comments beginning <!--[if and comments beginning <!--! survive even with comment removal switched on.

Also minify inline <style> and <script> hands those blocks to the same routines behind CSS Minifier and JavaScript Minifier. Stylesheets lose their comments and whitespace and #aabbcc colours shorten to #abc, with /*! licence blocks kept. Scripts lose comments and indentation only: nothing is renamed, no dead code is removed and statements are never joined onto one line, so code that relies on automatic semicolon insertion still runs. A <script> whose type attribute names something other than JavaScript — application/json, text/template, a Handlebars block — is recognised and copied out unchanged. Switch the option off and script and style bodies are not touched at all.

Two limits are worth knowing before you paste production markup in. The first is that this is a conservative minifier: optional closing tags stay, quotes are never stripped from attribute values, default and boolean attributes are not shortened, and nothing is reordered or deduplicated. It will therefore save less than a tool that rebuilds the document, and in exchange it has nothing to get wrong. The second is whitespace itself. Whether a space goes is settled by the tag name against a fixed list, never by your stylesheet, and that list counts br, iframe, video and canvas as structural alongside the true block elements. A menu whose list items are styled display:inline-block therefore loses the newline that was drawing the gap you see, and an iframe set in a line of prose ends up flush against the words either side. Look at the rendered page afterwards, or leave Collapse whitespace off and take the comment saving alone.

Runs on your device. Your file is processed directly in this browser.