Minify
HTML, CSS, JSON, XML minifier

Minify and beautify for HTML, CSS, JSON, XML. Typical 30-50% size reduction on HTML/CSS sources, up to 70% on pretty-printed JSON. Inline compression stats. For JavaScript you need an AST-based minifier (Terser, esbuild, swc) integrated in the build pipeline: this tool covers languages that can be handled with deterministic text-replacement rules.
Format
How to use the minifier

Paste the source

HTML, CSS, JSON or XML. For HTML the tool preserves the content of
, , <script>, <style> intact (significant whitespace).</p>
                    </div>
                </li>
                                <li>
                    <span class="tools-howto-num">2</span>
                    <div>
                        <h3>Pick the action</h3>
                        <p>Minify strips comments and collapses whitespace. Beautify reformats with consistent indentation. Inverse functions: minify the beautify output and you get back an equivalent source.</p>
                    </div>
                </li>
                                <li>
                    <span class="tools-howto-num">3</span>
                    <div>
                        <h3>Check stats</h3>
                        <p>The status bar shows input size, output size, reduction/expansion percentage. Typical: HTML -30%, CSS -25%, JSON pretty -> minified -65%.</p>
                    </div>
                </li>
                                <li>
                    <span class="tools-howto-num">4</span>
                    <div>
                        <h3>Copy or re-process</h3>
                        <p>Copy for direct use. For build workflows (Webpack, Vite, esbuild), these minifiers are integrated in the toolchain: use the minifier here only for ad-hoc scripts or quick checks.</p>
                    </div>
                </li>
                            </ol>
        </section>
        
        
        <!-- Why -->
                <section class="tools-section" id="why">
            <header class="tools-section-header">
                <h2>What it minifies and what it leaves alone</h2>
            </header>
            <div class="tools-prose"><p><strong>Languages covered.</strong> The minifier handles HTML, CSS, JSON and XML, the languages where whitespace and comment removal can be applied with deterministic text-replacement rules. For JavaScript, reliable reduction requires an AST parser (Terser, esbuild, swc) capable of variable renaming, dead code elimination and mangling: semantically complex transformations, out of scope for a lightweight utility and properly the responsibility of the build pipeline (Webpack, Vite, esbuild).</p><p><strong>HTML preservation rules.</strong> The HTML minifier respects contexts where whitespace is significant: inside <code><pre></code>, <code><textarea></code>, <code><script></code>, <code><style></code> the content stays intact. Some more aggressive minifiers strip newlines inside <code><pre></code> breaking code samples, or strip whitespace inside <code><script></code> breaking multi-line template literals: these mistakes are prevented here.</p><p><strong>Operational privacy.</strong> The HTML, CSS and JSON of a site under build can contain references to internal backends, database schema, API structure, dummy accounts or secrets in comments. The minification happens directly in the browser, avoiding the transfer of these sources to a third-party service for what is essentially a mechanical operation.</p></div>
        </section>
        
        <!-- Sezioni custom (es. ts_inference, sepa) -->
        
        <!-- Glossary -->
        <section class="tools-section tools-glossary" aria-labelledby="glossary-heading">
    <header class="tools-section-header">
        <h2 id="glossary-heading">Glossary</h2>
        <p class="tools-section-sub">Technical terms used on this page, briefly explained.</p>
    </header>
    <dl class="tools-glossary-list">
                <dt id="gloss-minify" class="tools-glossary-term">
            Minify            <a href="#gloss-minify" class="tools-glossary-anchor" aria-label="Anchor link">#</a>
        </dt>
        <dd class="tools-glossary-def">
            Removal of non-significant whitespace, comments, indentation to reduce file size. Typically -20-50% bytes for HTML/CSS, -50-70% for pretty-printed JSON.                    </dd>
                <dt id="gloss-beautify" class="tools-glossary-term">
            Beautify            <a href="#gloss-beautify" class="tools-glossary-anchor" aria-label="Anchor link">#</a>
        </dt>
        <dd class="tools-glossary-def">
            Inverse operation: re-indents and re-spaces a minified or badly formatted file to make it human-readable.                    </dd>
                <dt id="gloss-significant-whitespace" class="tools-glossary-term">
            Significant whitespace            <a href="#gloss-significant-whitespace" class="tools-glossary-anchor" aria-label="Anchor link">#</a>
        </dt>
        <dd class="tools-glossary-def">
            Spaces/newlines that affect rendering or execution. Examples: inside <pre>, inside JS/CSS strings, in XML CDATA. The minifier respects these contexts.                    </dd>
            </dl>
</section>

        <!-- FAQ -->
                <section class="tools-section" id="faq">
            <header class="tools-section-header">
                <h2>Frequently asked questions</h2>
            </header>
            <div class="tools-faq">
                                <details class="tools-faq-item">
                    <summary>Why is there no JS minify?</summary>
                    <div class="tools-faq-answer">To reliably reduce JS bytes you need an AST parser (Terser, esbuild, swc): transformations like variable renaming, dead code elimination and mangling require semantic understanding of the code. These are heavy libraries, normally integrated in a build pipeline (Webpack, Vite, esbuild). For ad-hoc minify from the terminal: <code>npx terser file.js -c -m</code>.</div>
                </details>
                                <details class="tools-faq-item">
                    <summary>Does the CSS minifier collapse colors?</summary>
                    <div class="tools-faq-answer">Partially: <code>#aabbcc</code> becomes <code>#abc</code> where possible (only if the three channels have both nibbles equal). Other micro-optimizations (unit removal on 0, rgba(0,0,0,1) -> #000 conversion) are not implemented to avoid breaking CSS edge cases.</div>
                </details>
                                <details class="tools-faq-item">
                    <summary>Does HTML minify break rendering?</summary>
                    <div class="tools-faq-answer">It should not. The tool preserves content of <pre>, <textarea>, <script>, <style>. Edge case: HTML with significant whitespace inline (e.g. <code><span>a</span> <span>b</span></code>) may become <code><span>a</span><span>b</span></code> with the two spans glued. For text layouts sensitive to whitespace, use beautify and review by hand.</div>
                </details>
                                <details class="tools-faq-item">
                    <summary>Does it work offline?</summary>
                    <div class="tools-faq-answer">Yes. Bookmark for offline use.</div>
                </details>
                                <details class="tools-faq-item">
                    <summary>Does JSON minify handle JSON with comments (JSONC)?</summary>
                    <div class="tools-faq-answer">No, JSON.parse rejects comments. For JSONC: strip comments with regex before pasting, or use a dedicated JSONC parser (Microsoft's jsonc-parser library for example).</div>
                </details>
                                <details class="tools-faq-item">
                    <summary>Is there a size limit?</summary>
                    <div class="tools-faq-answer">Nothing hardcoded. HTML/CSS/JSON files of 1-2 MB are comfortable. Beyond 10 MB the UI may slow down. For huge files: <code>html-minifier-terser</code> CLI.</div>
                </details>
                                <details class="tools-faq-item">
                    <summary>Does XML beautify handle CDATA sections?</summary>
                    <div class="tools-faq-answer">Treats <![CDATA[...]]> as a preservable element. Verify the result for complex cases (CDATA with internal text tags that the parser may confuse).</div>
                </details>
                            </div>
        </section>
        
        
        <!-- Related blog (solo IT, solo se categoria specificata) -->
        
        <!-- Author bio (E-E-A-T) -->
        <aside class="tools-author-bio" itemscope itemtype="https://schema.org/Person">
    <link itemprop="url" href="https://www.mauriziofonte.it/pages/about">
    <img class="tools-author-bio-photo"
         src="/layout/images/maurizio-fonte.jpg"
         alt="Maurizio Fonte profile photo"
         width="80" height="80"
         loading="lazy"
         itemprop="image">
    <div class="tools-author-bio-body">
        <h3 class="tools-author-bio-name" itemprop="name">Maurizio Fonte</h3>
        <p class="tools-author-bio-role" itemprop="jobTitle">Senior IT Consultant - Backend Engineer, Cybersecurity, AI/LLM</p>
        <p class="tools-author-bio-text">Working in IT since 2005, freelance with VAT registration since 2014. I work on PHP/Laravel/Symfony backends, unmanaged Linux infrastructure, applied cybersecurity and LLM integration in production for Italian SMB. Every tool published here was born from a real problem encountered in consulting.</p>
        <div class="tools-author-bio-links">
            <a href="/pages/about" rel="author">
                <svg width="14" height="14" class="lucide lucide-user" aria-hidden="true" focusable="false"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
  <circle cx="12" cy="7" r="4" />
</svg>                <span>About me</span>
            </a>
            <a href="https://github.com/mauriziofonte" rel="me noopener" target="_blank">
                <svg width="14" height="14" class="lucide lucide-github" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.57.1.78-.25.78-.55 0-.27-.01-1.18-.02-2.14-3.2.7-3.87-1.36-3.87-1.36-.52-1.33-1.27-1.68-1.27-1.68-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.02 1.75 2.68 1.24 3.34.95.1-.74.4-1.24.73-1.53-2.55-.29-5.24-1.28-5.24-5.7 0-1.26.45-2.29 1.18-3.1-.12-.29-.51-1.46.11-3.04 0 0 .96-.31 3.16 1.18.92-.26 1.9-.39 2.88-.39s1.96.13 2.88.39c2.2-1.49 3.16-1.18 3.16-1.18.62 1.58.23 2.75.11 3.04.74.81 1.18 1.84 1.18 3.1 0 4.43-2.7 5.41-5.27 5.69.41.36.78 1.06.78 2.13 0 1.54-.01 2.78-.01 3.16 0 .31.21.66.79.55C20.21 21.39 23.5 17.08 23.5 12 23.5 5.65 18.35.5 12 .5z"/></svg>                <span>GitHub</span>
            </a>
            <a href="https://www.linkedin.com/in/mauriziofonte" rel="me noopener" target="_blank">
                <svg width="14" height="14" class="lucide lucide-linkedin" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.94v5.67h-3.55V9h3.41v1.56h.05c.48-.9 1.65-1.85 3.39-1.85 3.62 0 4.29 2.39 4.29 5.49v6.25zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zm1.78 13.02H3.56V9h3.56v11.45zM22.22 0H1.78C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.78 24h20.44C23.21 24 24 23.23 24 22.28V1.72C24 .77 23.21 0 22.22 0z"/></svg>                <span>LinkedIn</span>
            </a>
        </div>
    </div>
</aside>

        <!-- CTA system: array di tipi (about|contact|quote), override per-tool oppure _base.cta.* -->
                <section class="tools-cta-group tools-cta-group--soft">
                        <article class="tools-cta tools-cta--about tools-cta--soft">
                <h2>Who builds these tools?</h2>
                <p>Maurizio Fonte, senior IT consultant with 20+ years in PHP, Laravel, unmanaged Linux infrastructure, applied cybersecurity and AI/LLM integration. Production backends, legacy code modernization, security audits, custom AI agents and MCP servers: the work behind every tool published here.</p>
                <a href="/pages/about" class="tools-btn-primary tools-btn-sm">
                    <svg width="14" height="14" class="lucide lucide-user" aria-hidden="true" focusable="false"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
  <circle cx="12" cy="7" r="4" />
</svg>                    About Maurizio Fonte                </a>
            </article>
                    </section>
        
        
    </main>
</div>
    <footer class="tools-footer tools-footer-soft" role="contentinfo">
    <div class="tools-footer-inner tools-footer-soft-inner">
        <div class="tools-footer-soft-brand">
            <p class="tools-footer-soft-by">
                Tool by                <a href="https://www.mauriziofonte.it/pages/about"><strong>Maurizio Fonte</strong></a>
                <span class="tools-footer-soft-role">Senior IT Consultant - PHP, Cybersecurity, AI for SMB</span>
            </p>
            <p class="tools-footer-soft-text">
                For professional consulting or custom development,                <a href="https://www.mauriziofonte.it/">visit the main site</a>.
            </p>
        </div>

        <div class="tools-footer-soft-links">
            <a href="/tools/">All tools</a>
            <a href="https://www.mauriziofonte.it/pages/about">About me</a>
            <a href="https://www.mauriziofonte.it/pages/contattami">Contact</a>
            <a href="/tools/privacy-policy">Privacy policy</a>
            <a href="/tools/cookie-policy">Cookie policy</a>
                        <a href="/strumenti/minifica-html-css-js-online" data-tools-lang-switch="it">
                <svg width="16" height="16" class="lucide lucide-globe" aria-hidden="true" focusable="false"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <circle cx="12" cy="12" r="10" />
  <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
  <path d="M2 12h20" />
</svg> Italiano            </a>
                    </div>
    </div>

    <div class="tools-footer-bottom">
        <p>© 2026 Maurizio Fonte · Senior IT consultant - Backend, Cybersecurity, AI for Italian SMBs</p>
    </div>
</footer>
<div id="tools-cookie-banner" class="tools-cookie-banner" hidden role="dialog" aria-live="polite" aria-label="Cookie information banner">
    <div class="tools-cookie-banner-inner">
        <p class="tools-cookie-banner-text">
            All cookies are essential for the proper functioning of this site and cannot be disabled. Learn more in our             <a href="/tools/cookie-policy">Cookie policy</a>
        </p>
        <div class="tools-cookie-banner-actions">
            <button type="button" data-tools-banner-ack class="tools-btn-primary">Got it</button>
        </div>
    </div>
</div>
<script>
(function () {
    var b = document.getElementById('tools-cookie-banner');
    if (!b) return;
    var ack = (document.cookie.match(/(?:^|;\s*)tools_banner_ack=([^;]+)/) || [])[1];
    if (!ack) {
        b.hidden = false;
        b.classList.add('is-active');
    }
    var btn = b.querySelector('[data-tools-banner-ack]');
    if (!btn) return;
    btn.addEventListener('click', function () {
        var d = new Date();
        d.setTime(d.getTime() + 180 * 24 * 60 * 60 * 1000);
        var secure = location.protocol === 'https:' ? '; Secure' : '';
        document.cookie = 'tools_banner_ack=1; expires=' + d.toUTCString() + '; path=/; SameSite=Lax' + secure;
        b.hidden = true;
        b.classList.remove('is-active');
    });
})();
</script>

                <script src="/tools/assets/public/js/_helpers.js?v=ab1c80b4" defer></script>
                <script src="/tools/assets/public/js/public.js?v=b1fdcab6" defer></script>
                <script src="/tools/assets/public/js/minifier-gui.js?v=d2c922e2" defer></script>
        
                
        <script data-tools-analytics>
    (function () {
        var _paq = window._paq = window._paq || [];
        _paq.push(['trackPageView']);
        _paq.push(['enableLinkTracking']);
        _paq.push(['enableHeartBeatTimer', 10]);
        var u = '//www.mfcdn.eu/insights/';
        _paq.push(['setTrackerUrl', u + 'libraries']);
        _paq.push(['setSiteId', 1]);
        var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
        g.async = true; g.defer = true; g.src = u + 'libraries.js';
        s.parentNode.insertBefore(g, s);
    })();
    </script>
    </body>
</html>