Minify and beautify HTML, CSS, JavaScript, JSON, and plain text. Includes compression ratio stats, real-time preview, batch compression chart, and complete guide to web performance optimization through code compression.
Free forever
No signup
Data stays in your browser
0
Original (chars)
0
Compressed (chars)
0
Saved (chars)
0%
Compression Ratio
📊 File Size Comparison
Visual comparison of your original vs compressed file sizes. The green bar shows the compressed size — shorter is better.
0 bytes
Original
0 bytes
Compressed
📊 Compression Ratio Benchmarks by File Type
Typical compression ratios achieved by minification alone (before Gzip/Brotli server compression). Actual results depend on code structure.
File Type
Typical Minification Saving
After Gzip/Brotli
Total Size Reduction
CSS
20-35%
60-80%
70-90% combined
JavaScript
30-50%
65-80%
75-92% combined
HTML
10-25%
55-75%
60-85% combined
JSON
15-30%
70-85%
75-92% combined
Plain Text
5-15%
50-70%
55-80% combined
Minification removes unnecessary characters at the code level. Gzip/Brotli compression is applied by web servers on top of minification. Always do both for optimal performance.
🧮 How Compression Ratio Is Calculated
The compression ratio tells you exactly how much smaller your file became after minification.
3. Bytes Saved (approx):
= Characters Saved × 1 byte per character
= 0 bytes saved
📖 Code Compression & Web Performance: The Complete Guide
What Is Code Minification and Why Does It Matter?
Code minification is the process of removing all unnecessary characters from source code — whitespace, line breaks, comments, block delimiters, and redundant semicolons — without changing its functionality. The result is an identical program in a much smaller file. For websites and web applications, smaller files mean faster downloads, faster page rendering, and better user experience across all devices, especially on mobile networks.
💡 Google research shows that a 0.1-second improvement in mobile site speed can boost conversion rates by up to 8.4% for ecommerce sites. Minification is one of the simplest, highest-ROI performance optimizations available — it requires no infrastructure changes, no CDN configuration, and no ongoing maintenance.
How Minification Works Across Different Languages
Each language has different rules for what can be safely removed:
CSS Minification: Removes whitespace, line breaks, comments (/* comment */), trailing semicolons, and unnecessary units (e.g., 0px → 0). CSS files typically shrink by 20-35% through minification alone. This is the safest type of minification because CSS is declarative — there's no logic to break.
JavaScript Minification: The most aggressive form. Removes whitespace, line breaks, and comments (// single-line and /* multi-line */). Advanced minifiers like UglifyJS and Terser also shorten variable names (myLongVariableName → a) and remove dead code. JS files can shrink by 30-50%. Our tool performs safe minification only — it removes whitespace and comments but preserves variable names to guarantee functionality.
HTML Minification: Removes whitespace between tags, line breaks, and HTML comments (<!-- comment -->). HTML minification is the least aggressive (10-25% savings) because HTML structure must remain valid. Our tool handles HTML safely, preserving all tag integrity.
JSON Minification: Removes all whitespace and line breaks. JSON is the simplest to minify and typically shrinks by 15-30%. Minified JSON is functionally identical to prettified JSON.
Minification vs Compression (Gzip/Brotli): Why You Need Both
Minification and compression are complementary technologies that work at different layers of the web stack:
Minification happens at the source code level — you minify files before deploying them to your server. It permanently reduces file size by removing redundant characters that were only there for human readability.
Compression (Gzip or Brotli) happens at the server level — your web server automatically compresses files as they're transmitted to visitors. This compression is lossless and reversible; the browser decompresses the file upon receipt.
Together, a 100KB CSS file can be reduced to ~25KB through minification, then further compressed to ~8KB via Gzip — a combined 92% reduction. Always minify first, then let your server or CDN handle compression. Both are standard on all modern hosting platforms including Cloudflare Pages, Netlify, and Vercel.
5 Best Practices for Production Code Compression
Minify during your build process, not manually. Use build tools like Webpack, Vite, Parcel, or Gulp to automatically minify CSS, JS, and HTML during every build. Our tool is ideal for quick one-off minification or for projects that don't have a build pipeline.
Enable Brotli compression on your server. Brotli compresses 15-25% better than Gzip for text-based assets. Cloudflare Pages, Netlify, and most CDNs support Brotli automatically. Check your hosting platform's documentation.
Use source maps for debugging. Minified code is nearly impossible to debug. Generate source maps (.map files) during minification so browser developer tools can display the original, readable source code while running the minified version.
Cache compressed assets aggressively. Minified files change infrequently — set far-future cache headers (e.g., Cache-Control: public, max-age=31536000, immutable) and use content hashing in filenames (style.a1b2c3d.css) for cache busting when files do change.
Don't minify files that are already small. Files under 1KB see negligible benefit from minification. Focus minification efforts on your largest CSS and JS bundles where the byte savings are most impactful.
How to Verify Compression Is Working
After deploying minified and compressed assets, verify they're working correctly: (1) Open Chrome DevTools → Network tab → reload your page. (2) Click on any CSS or JS file. (3) Check the "Size" column — you should see two values: the smaller transferred size (compressed) and the larger actual size (minified). (4) In the Response Headers section, look for content-encoding: br (Brotli) or content-encoding: gzip (Gzip). If you see neither, your server compression is not enabled.
Frequently Asked Questions
Is minification safe? Will it break my code?▼
Our minifier is designed to be safe and conservative. It removes whitespace, line breaks, and comments — characters that have no effect on code execution. It does NOT rename variables, restructure code, or perform any transformations that could alter functionality. For JavaScript specifically, we remove only whitespace and comments; variable names are left intact. Always test your minified output before deploying to production, especially for complex JavaScript applications.
What types of code can I compress with this tool?▼
You can compress HTML, CSS, JavaScript, JSON, and plain text. The tool automatically detects the type based on your input content. For mixed content — such as HTML with inline CSS and JavaScript — the tool applies the safest common minification rules to avoid breaking any embedded code. For optimal results with complex files, minify each language separately.
Can I beautify minified code back to a readable format?▼
Yes — use the "Beautify / Format" button. It adds proper indentation, line breaks, and spacing to make minified or poorly formatted code readable again. This is useful for debugging production code, reviewing third-party libraries, or recovering formatting from files that were minified without source maps.
Does this tool store or transmit any of my code?▼
No. All compression and beautification happens entirely in your browser using JavaScript. We never see, store, log, or transmit any code you paste into the tool. When you close the page, everything is gone. This tool has no database, no server-side processing, no analytics, and no tracking of any kind. You can verify this by viewing the page source — there are no external API calls.
How does compression ratio work?▼
Compression ratio = (1 − Compressed Size ÷ Original Size) × 100. For example, if your original CSS is 1,000 characters and after minification it's 700 characters, the compression ratio is (1 − 700/1000) × 100 = 30%. This means your file is 30% smaller after minification. CSS and JS typically achieve 25-50% reduction; HTML typically achieves 10-25%. The formula breakdown section shows the complete math with your actual numbers.
📖 How to Use This Code Compressor
Step 1: Paste your HTML, CSS, JavaScript, JSON, or plain text into the input box above.
Step 2: Click "Minify / Compress" to reduce file size by removing unnecessary characters, or "Beautify / Format" to add proper indentation and spacing.
Step 3: Review the compression stats — you'll see exactly how many characters were saved and the compression ratio achieved.
Step 4: The file size comparison chart visually shows how much smaller your code became.
Step 5: Click "Copy Output" and paste the result into your project files before deploying to production.
All processing happens entirely in your browser. No code is ever stored, logged, or transmitted to any server. The tool works offline after the initial page load.