ToolJutsu
All tools
Developer Tools

HTML Minifier

Minify HTML markup for faster pages.

0 B
Tip: press Ctrl/ + Enter
Processed on your device. We never see your files.

How to use HTML Minifier

What this tool does

An HTML minifier rewrites a markup document so it carries the fewest bytes possible while rendering identically in the browser. This tool removes HTML comments, collapses runs of spaces, tabs and newlines down to a single space, and deletes whitespace-only gaps between tags. Crucially, it does this with a scanner that understands HTML structure: the contents of <pre>, <textarea>, <script> and <style> elements are passed through completely untouched, so embedded code and preformatted text are never corrupted. It also keeps conditional comments and the <!doctype> declaration intact. Everything runs inside your browser — the HTML you paste is never uploaded.

Why you might need it

HTML is the first thing a browser downloads, and on content-heavy pages it can be surprisingly large. Source HTML is written for people: nested indentation, blank lines separating sections, comments explaining each block. The browser ignores all of that, so shipping it to visitors is pure overhead. Minifying removes the slack without changing what the page looks like. It is especially useful for the initial HTML response, where shrinking the document means the browser can start parsing and rendering sooner. It is also handy when you need to embed an HTML fragment inside a JSON payload, a JavaScript string, or an email template, where every character counts and stray whitespace causes problems.

How to use it

  1. Paste your HTML into the input box, or drop an .html file directly onto it.
  2. Click Minify HTML, or press Ctrl/Cmd + Enter.
  3. Read the summary: it shows the original size, the minified size, and the percentage saved.
  4. Copy the minified output and drop it into your build output or template.

Common pitfalls

The trap with HTML minification is whitespace that is actually visible. Between block-level elements, whitespace is insignificant and safe to remove — but between inline elements like <span>, <a> or <img>, a space can be a real, rendered gap. Collapsing </a> <a> to </a><a> removes the space the design relied on. This minifier collapses such gaps for maximum savings, so after minifying a page with inline-element layouts, give it a quick visual check. The good news is the real risk — corrupting embedded code — is handled for you: anything inside <pre>, <textarea>, <script> or <style> is preserved byte for byte, so a multi-line script keeps its line breaks and a <pre> block keeps its exact indentation. Note this is a whitespace-and-comment minifier: it does not remove optional tags, strip default attributes, or otherwise rewrite the markup.

Tips and advanced use

Minify as the final step before publishing and keep your readable, commented source in version control — never hand-edit the minified file. Pair minification with server-side gzip or Brotli compression: they operate at different layers and their savings combine. If a minified page does not look right, the cause is almost always a collapsed space between inline elements; add an explicit non-breaking space or adjust the CSS rather than skipping minification. Because the whole process runs locally, it is perfectly safe to minify pages from a private or unreleased site — none of the markup ever leaves your machine.

Frequently asked questions

Is my HTML uploaded anywhere?
No. The minifier runs as JavaScript inside your browser tab, so your markup is processed on your own device and never transmitted. You can verify this by watching the Network tab while you minify.
Will minifying break my page layout?
It should not. The minifier collapses whitespace that browsers already treat as insignificant. Be aware, though, that whitespace between inline elements can be visible, so review pages that rely on those gaps after minifying.
Does it keep my script and style code intact?
Yes. The contents of pre, textarea, script and style elements are copied out exactly as written. Whitespace inside them is never collapsed, so embedded JavaScript and CSS keep working and preformatted text stays formatted.
Are HTML comments removed?
Ordinary comments are removed. Conditional comments such as <!--[if lt IE 9]> are kept, because they are instructions to certain browsers rather than notes, and the <!doctype> declaration is preserved as well.
Why is my saved percentage small?
HTML that was generated by a build tool or template engine often has little spare whitespace to begin with. Hand-written, deeply indented pages with many comments compress the most.

Related tools