Skip to content

HTML Minifier — Fast, Safe Online HTML Compression

Compress and minify HTML instantly in the browser with safe defaults, optional inline minification, and a preview of byte savings.

Updated

What is the HTML Minifier — Fast, Safe Online HTML Compression?

HTML Minifier is a browser-based tool for quickly compressing HTML markup without changing behavior. It removes unnecessary characters (comments, redundant whitespace, optional attribute values) and reports byte savings so you can measure impact before deploying. The tool runs entirely client-side, uses conservative defaults to avoid breaking templates, and includes opt-in lightweight inline CSS/JS minification for rapid previews. Use it for quick checks, CI-free experimentation, or to learn how specific rules affect payload size.

How it works

Paste your HTML into the input area and adjust the toggle options to control which minification passes run. The tool performs conservative, deterministic transformations in this sequence:

  1. Validation
  • Input must be a string and under the recommended size (200 KB) to keep the browser responsive.
  • The tool throws human-readable validation errors for empty or oversized inputs.
  1. Comment removal (optional)
  • Removes standard HTML comments while preserving conditional comments and common server-side or build directives to avoid breaking templates.
  1. Inline block handling (optional)
  • When enabled, the tool performs a lightweight safe-strip on content inside <style> and <script> tags: it removes block comments, strips simple line comments for JavaScript, and collapses internal whitespace. This is intentionally NOT a full JS/CSS minifier and is intended only for quick previews.
  1. Boolean and empty attribute collapsing (configurable)
  • Converts boolean attribute patterns like disabled="disabled" or selected="" into safe, shorter forms while preserving data-_ and aria-_ attributes unless explicitly allowed.
  1. Whitespace collapsing (optional)
  • Collapses consecutive whitespace and trims spaces between tags while protecting preformatted blocks (pre, textarea, code, script, style) to preserve semantics.
  1. Result calculation
  • The tool computes original and minified byte counts and the percentage savings using UTF-8 byte length, and surfaces non-fatal warnings if the minified output increases in size.

Design notes

  • Safety-first defaults prevent accidental removal of template markers or accessibility attributes.
  • The inline minifier is conservative; for production-grade JS/CSS minification prefer build tools like Terser, cssnano, or htmlnano.
  • All processing is pure and runs in the browser, so no code leaves your machine.

When to use this tool

  • Quick experiments and previews of minification impact.
  • Verifying which rules change output size before adding minification to a build pipeline.
  • Teaching or debugging how specific rules (comments, whitespace, boolean attributes) affect HTML size and render parity.

Examples

Basic HTML compression

Remove comments and collapse whitespace on a simple HTML page to quickly reduce payload size.

<!doctype html>
<html>
  <head><!-- dev comment --><title>App</title></head>
  <body>
    <div class="container">Hello world</div>
  </body>
</html>
<!doctype html><html><head><title>App</title></head><body><div class="container">Hello world</div></body></html>

Preserve templates safely

Use conservative defaults to avoid removing template markers, conditional comments, or data/aria attributes.

<div data-value="" aria-label="btn"> <!-- template marker --> <button disabled="disabled">Click</button></div>
<div data-value="" aria-label="btn"><button disabled>Click</button></div>

Inline preview minification

Opt-in lightweight inline CSS/JS minification for quick previews without a full build pipeline.

<style>/* long comment */ body {  margin:  0;  }</style><script>/* comment */ const x = 1; // note</script>
<style>body { margin: 0; }</style><script>const x = 1;</script>

Frequently asked questions

How do I use the HTML Minifier?

Paste your HTML into the input area, toggle the minification options to your needs (comments, whitespace, empty attributes, boolean attributes, inline minification), then copy or download the minified output. The tool shows original and minified byte counts and savings percentage.

Is this tool safe to use on templates and server-side markup?

Yes. The tool uses conservative defaults that preserve conditional comments and data-/aria- attributes by default to avoid breaking templates. If you enable more aggressive options, review the minified output before deploying and use build-time tools for production automation.

Does inline CSS and JavaScript get fully minified?

No. Inline minification is a lightweight, opt-in pass that strips comments and collapses whitespace for quick previews. It is not a full replacement for dedicated minifiers like Terser or cssnano; for production builds use those tools.

Why is my minified output larger than the original?

Certain transformations can increase size (for example replacing verbose formatting with slightly different attribute quoting or when input is already compact). The tool warns when minified output is larger and suggests toggling options or using a build-tool pipeline for better control.

How large of an HTML file can I paste?

The tool recommends keeping input under 200 KB for responsiveness in the browser. For larger files or batch minification, use node-based tools such as html-minifier-terser, htmlnano, or build-step plugins.

Is my HTML sent to a server?

No. All minification runs entirely in your browser; nothing is uploaded. This keeps your source private and fast to process.

Which settings should I use for production?

Use conservative settings during development to validate changes, then adopt build-time minification with battle-tested tools (htmlnano, html-minifier-terser, or bundler plugins) configured for CI/CD. The tool can help you preview the effect of each rule and create safe presets before automating them.

Can this tool break my layout or JavaScript?

Aggressive minification of inline scripts or removing certain attributes can change behavior. The default options are safe, but always test minified output in a staging environment and prefer build-time, AST-aware minifiers for production to avoid semantic regressions.

Related tools

More utilities you might find handy.

Developer

.env File Generator

Quickly generate clean, properly-quoted .env files from key-value pairs — no more quoting errors or broken deployments.
Developer

.htaccess Redirect Builder

Generate error-free Apache .htaccess code for 301 redirects, HTTPS enforcement, and canonical URL routing.
Developer

ASCII Converter – Text to ASCII, Hex, Binary & Back

Convert text to ASCII codes and decode back in decimal, hex, binary, or octal — live, private, and 100% browser-based.