Minify HTML, CSS, JavaScript, and more
A minifier (sometimes called a compressor or uglify step) strips comments and extra whitespace so HTML, CSS, JavaScript, JSON, XML, SVG, or SQL downloads faster. Meaning should stay. Gzip and Brotli still sit in front — minify makes those algorithms less work.
Why people minify code
You minify when the file is going live: a static HTML export, a CSS theme, an inline SVG icon, a JSON payload in a cookie, a JavaScript snippet you cannot run through webpack. The readable copy stays in git. The compact copy is what users download.
A JavaScript minifier is not Terser with mangling turned up. A conservative pass deletes comments and redundant space and leaves identifiers alone — safer for a pasted snippet, smaller savings than a bundler. An HTML minifier must not eat spaces between inline tags. JSON minify only works on valid JSON: no comments, no trailing commas.
How to use an online minifier
Paste or drop the file. Leave “remove comments” on unless you need a license header or an IE conditional comment. Hit Run. Read the savings line. Copy or download. If CSS and JavaScript live inside HTML, use the mixed HTML CSS JS minifier so nested <style> and <script> get a pass too.
Then gzip still happens on the server or CDN. Minify plus gzip is the usual stack. Gzip alone on pretty source still helps; minify first helps more because comments are not there to repeat.
HTML minify vs CSS minify vs minify JS
They are different languages. CSS mostly shrugs at spaces around `{`. HTML can treat a newline between two `<a>` tags as a visible gap. JavaScript can turn `return` plus a newline plus `{}` into `return;` and a stray block (ASI). That is why “minify js”, “minify css”, and “html compressor” are separate tools, not one blender.
Tools in this hub
HTML Minifier
Minify HTML online. Remove comments, collapse whitespace, and shrink pages in the browser. Free HTML compressor for developers.
CSS Minifier
Minify CSS online. Strip comments and extra space from stylesheets. Fast CSS compressor, private by default.
JavaScript Minifier
Minify JavaScript online. Conservative JS compressor that respects strings and comments. Run locally in the browser.
JSON Minifier
Minify JSON online. Compact valid JSON by removing whitespace. Pair with the JSON formatter when you need to read it again.
XML Minifier
Minify XML online. Collapse extra whitespace in XML documents while keeping tags intact.
SVG Minifier
Minify SVG markup. Remove editor metadata, comments, and extra space from vector files before you inline them.
PHP Minifier
Minify PHP source for review or transport. Strips comments and redundant whitespace. Not a replacement for opcode caches.
SQL Minifier
Minify SQL queries. Collapse whitespace in SELECT/INSERT statements for logs, embeds, and compact migrations.
YAML Minifier
Minify YAML by removing blank lines and trailing space. Indentation-aware, safe for simple configs.
SCSS Minifier
Minify SCSS/Sass-like styles. Comment stripping and whitespace collapse for preprocessor source.
LESS Minifier
Minify LESS stylesheets. Remove comments and extra whitespace from LESS source before compile notes.
GraphQL Minifier
Minify GraphQL queries and mutations. Collapse whitespace while keeping selection sets readable enough to debug.
JSONC Minifier
Minify JSONC (JSON with comments). Strip comments and compact the remaining JSON-like payload.
HTML CSS JS Minifier
Minify HTML with nested CSS and JavaScript in one pass. Useful for static snippets and email-adjacent markup.
Questions about minify
What does minify actually remove from HTML, CSS, and JavaScript?
Comments, extra spaces, and extra line breaks — the bytes you typed for humans. Meaning should stay. CSS .btn { color: teal; } becomes .btn{color:teal}. HTML is pickier: a space between two <a> tags is a real gap on the page.
Should I minify while I am still writing code?
No. Beautify and format while you think. Minify when the file is going live, getting embedded, or pasted into a tight space. Editing minified JavaScript is how bugs hide in a 4,000-character line.
Does minifying HTML, CSS, and JS follow the same rules?
No. CSS mostly shrugs at spaces around {. HTML keeps some whitespace as layout. JavaScript can turn return\n{} into return; plus a stray block. That is why they are separate minifiers, not one blender.
Can minify break a page?
Yes, if you crush a space that was layout, or smash a string, or ignore return plus a newline. A conservative pass looks like <h1 class="hero">Hello</h1> staying a heading. If the output throws a syntax error, you deleted something that was not decoration.
Does minify replace gzip or Brotli?
No. Minify changes the source. Gzip changes how that source travels. They stack. A stylesheet might go 24 KB → 18 KB minified → about 6 KB on the wire. Quoting only one of those numbers starts folklore.
What is a tiny minify example?
Before: function hi(name) {\n return "Hi, " + name;\n} After: function hi(name){return "Hi, "+name;}. Same function. Fewer bytes. Fun fact: gzip still loves the minified version because comments are gone.
Should JSON configs in git be minified?
Usually no. Humans diff pretty JSON. Minify JSON for the wire, a cookie, or an env var that hates newlines. {"ok": true} vs {"ok":true} is the whole mood.
What about SVG minify versus PNG compression?
SVG minify deletes extra markup — comments, editor layers — not pixels. A PNG compressor throws away image data on purpose. <svg><rect/></svg> is hygiene. A photograph traced into a million paths may not want to be SVG at all.