How to minify HTML online
Three steps, about a minute.
1
Paste your HTML
Paste your markup, drop an .html file onto the editor, or load the sample document. With auto-minify on, the output updates as you type.
2
Pick a preset
Start with Balanced. Switch to Safe for templates and email HTML, or Aggressive for the smallest output, then fine-tune any of the 30 options.
3
Copy or download
Check the savings bar, then copy the minified HTML or download it as a file. Settings and your last 20 runs are remembered on this device.
What minification does to your markup
The same document before and after the Balanced preset. Nothing about the rendered page changes — only bytes the browser does not need.
Before
<!DOCTYPE html>
<html lang="en">
<head>
<!-- main stylesheet -->
<meta charset="utf-8">
<title>Pricing</title>
<style type="text/css">
.card {
padding : 16px ;
color : #ffffff ;
}
</style>
</head>
<body>
<div class="card" style="">
<h1>Plans</h1>
</div>
</body>
</html>
341 bytes
After
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Pricing</title><style>.card{padding:16px;color:#fff}</style></head><body><div class="card"><h1>Plans</h1></div></body></html>
191 bytes — 44% smaller
Five separate changes happened there: indentation between tags collapsed, the comment was dropped, type="text/css" was removed as redundant in HTML5, the CSS was minified and #ffffff shortened to #fff, and the empty style="" attribute was removed. Note that an empty data-* attribute would have been kept — only a safe list of attributes is dropped when empty.
Safe vs Balanced vs Aggressive
The presets differ in how much they are willing to change. Every one of them keeps valid, working HTML for ordinary pages; the risk climbs as you move right.
Rule of thumb: ship Balanced. Reach for Aggressive only when the extra few kilobytes matter and you can load the page afterwards to confirm nothing shifted.
What each option actually does
The options that change the most bytes, and what they cost you.
Getting smaller HTML safely
A few habits that make minification pay off without surprises.
✓
Minify the output, not the source
Keep your repository readable and minify at build or deploy time. Committing minified HTML makes every future diff unreadable for a few kilobytes.
✓
Turn on gzip or brotli as well
Minification and compression stack. Compare the gzipped number here with your server's response size — that is what users actually download.
✓
Watch inline elements
Whitespace between <a>, <span> and <button> tags is rendered text. If your spacing disappears, switch on conservative collapse.
✓
Modernise or pre-minify inline JS
UglifyJS parses ES5. If you get the modern-syntax warning, move that script to an external file minified by your bundler.
✓
Be careful with templates
<?php ?> and <% %> blocks pass through untouched, but whitespace around {{ }} expressions is collapsed like any other text.
✓
Test the aggressive run
Minify, load the page, click through it once. Two minutes of checking is cheaper than debugging a layout shift in production.
Frequently asked questions
Everything people usually ask about minifying HTML.
Is my HTML uploaded to a server?
No. The minifier is JavaScript running in your browser, inside a Web Worker. Your markup never leaves your device, so pages containing API keys, customer data or unreleased content stay private. Once the page has loaded you can go offline and it keeps working.
How much smaller will my HTML get?
Typically 3 to 20 percent of the raw file, depending on how much indentation, commenting and inline CSS or JavaScript it contains. Hand-written and templated pages save the most; HTML that a build tool already processed saves the least. After gzip the gap narrows to a few percent, because gzip already compresses repeated whitespace well — which is why this tool shows both numbers.
Will minifying break my page?
The Safe and Balanced presets only make changes that keep the rendered result identical. The risk lives in the aggressive options: collapseInlineTagWhitespace can remove spaces that were visible text, removeTagWhitespace produces technically invalid markup, removeEmptyElements deletes containers such as an empty app mount point, and preventAttributesEscaping can break values containing quotes. Each of those is tagged in the settings panel.
Does it minify inline CSS and JavaScript too?
Yes. <style> elements and style attributes go through clean-css; <script> elements and inline event handlers go through UglifyJS. UglifyJS parses ES5, so inline scripts using const, let, arrow functions or async are passed through unchanged instead of being broken, and a warning appears under the tool when that happens.
What does "remove optional tags" do?
The HTML specification lets you omit tags a parser can infer — <html>, <head>, <body>, and the closing </p>, </li>, </tr> and </td>. With the option on, a list becomes <ul><li>a<li>b</ul>. Browsers render it identically, but the source is harder to read and strict downstream parsers may object.
Is removing attribute quotes safe?
Quotes are only dropped when the value contains no spaces, quotes, equals signs or angle brackets, so every browser still parses it correctly. It is valid HTML5 but not valid XHTML, and it can confuse regex-based parsers, template linters and some email clients — which is why it belongs to the Aggressive preset rather than the defaults.
Should I still minify if my server already uses gzip or brotli?
Yes, but expect modest gains. Compression already handles repeated whitespace efficiently, so minifying first usually saves a few extra percent on the wire. It also cuts the bytes the browser has to parse, which matters on large documents and slow devices. Minification and compression are complementary, not alternatives.
Can I minify PHP, Jinja, Handlebars or Angular templates?
PHP and ASP style blocks — <?php ... ?> and <% ... %> — are preserved untouched by default. Handlebars, Jinja and Angular expressions such as {{ name }} survive because they are ordinary text, but the whitespace around them is collapsed like any other text node, which matters if your template relies on it. Enable conservative collapse to keep a single space, and always check the rendered result.
How do I unminify or beautify HTML?
Use the Beautify button above the input panel; it re-indents minified markup with js-beautify. Minification is lossy for comments and formatting, so beautifying restores structure and indentation but cannot bring back comments that were removed.
What is the "JSON" output tab for?
It escapes the minified HTML into a valid JSON string, quotes included, ready to paste into an API payload, a config file or a test fixture. The JS tab does the same as a JavaScript template literal, escaping backticks and ${ so the string is safe to drop into code.
Is there a file size limit?
No hard limit. Minifying happens in a Web Worker so the page stays responsive, but documents over a few megabytes take noticeably longer and auto-minify switches itself off above 300 KB to keep typing smooth.
Is the HTML Minifier free?
Yes. Completely free, no sign-up, and no limit on how many documents you minify.
