Minify
Minifica HTML, CSS, JSON, XML

Minify e beautify per HTML, CSS, JSON, XML. Riduzione tipica del 30-50% sui sorgenti HTML/CSS, fino al 70% sul JSON pretty-printed. Statistiche di compressione inline. Per JavaScript serve un minifier AST-based (Terser, esbuild, swc) integrato nella build pipeline: questo tool si limita ai linguaggi che si possono trattare con regole text-replacement deterministiche.
Formato
Come usare il minifier

Incolla il sorgente

HTML, CSS, JSON o XML. Per HTML il tool preserva il contenuto di
, , <script>, <style> intatto (whitespace significativo).</p>
                    </div>
                </li>
                                <li>
                    <span class="tools-howto-num">2</span>
                    <div>
                        <h3>Scegli l'azione</h3>
                        <p>Minify rimuove commenti e collassa whitespace. Beautify riformatta con indentazione consistente. Funzionalità inverse: minify l'output del beautify ti restituisce un sorgente equivalente.</p>
                    </div>
                </li>
                                <li>
                    <span class="tools-howto-num">3</span>
                    <div>
                        <h3>Verifica le stats</h3>
                        <p>Lo status bar mostra dimensione input, dimensione output, percentuale di riduzione/aumento. Tipico: HTML -30%, CSS -25%, JSON pretty -> minified -65%.</p>
                    </div>
                </li>
                                <li>
                    <span class="tools-howto-num">4</span>
                    <div>
                        <h3>Copia o re-elabora</h3>
                        <p>Copia per uso diretto. Per workflow di build (Webpack, Vite, esbuild), questi minifier sono integrati nei tool: usa il minifier qui solo per script ad-hoc o quick check.</p>
                    </div>
                </li>
                            </ol>
        </section>
        
        
        <!-- Why -->
                <section class="tools-section" id="why">
            <header class="tools-section-header">
                <h2>Cosa minifica e cosa lascia stare</h2>
            </header>
            <div class="tools-prose"><p><strong>Linguaggi coperti.</strong> Il minifier elabora HTML, CSS, JSON e XML, cioè linguaggi su cui la riduzione di whitespace e commenti può essere applicata con regole deterministiche di text-replacement. Per JavaScript la riduzione affidabile richiede un parser AST (Terser, esbuild, swc) capace di operare su rinomina variabili, dead code elimination e mangling: trasformazioni semanticamente complesse, fuori scope per un'utility lightweight e correttamente di responsabilità della build pipeline (Webpack, Vite, esbuild).</p><p><strong>HTML, le regole di preservazione.</strong> Il minifier HTML rispetta i contesti dove whitespace è significativo: dentro <code><pre></code>, <code><textarea></code>, <code><script></code>, <code><style></code> il contenuto resta intatto. Alcuni minifier più aggressivi rimuovono newline dentro <code><pre></code> spezzando i code samples o rimuovono whitespace dentro <code><script></code> spezzando i template literal multi-riga: qui questi errori sono prevenuti.</p><p><strong>Privacy operativa.</strong> HTML, CSS e JSON di un sito in build possono contenere riferimenti a backend interni, schema database, struttura API, dummy account o secret in commenti. La minificazione avviene direttamente nel browser, evitando di trasferire questi sorgenti a un servizio terzo per un'operazione che è essenzialmente meccanica.</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">Glossario</h2>
        <p class="tools-section-sub">Termini tecnici usati in questa pagina, spiegati in due righe.</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">
            Rimozione di whitespace, commenti, indentazione non significativi per ridurre la dimensione del file. Tipicamente -20-50% bytes per HTML/CSS, -50-70% per JSON pretty-printed.                    </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">
            Operazione inversa: re-indenta e re-spazia un file minificato o mal formattato per renderlo leggibile umano.                    </dd>
                <dt id="gloss-whitespace-significativo" class="tools-glossary-term">
            Whitespace significativo            <a href="#gloss-whitespace-significativo" class="tools-glossary-anchor" aria-label="Anchor link">#</a>
        </dt>
        <dd class="tools-glossary-def">
            Spazi/newline che hanno effetto sul rendering o sull'esecuzione. Esempi: dentro <pre>, dentro stringhe JS/CSS, in CDATA XML. Il minifier rispetta questi contesti.                    </dd>
            </dl>
</section>

        <!-- FAQ -->
                <section class="tools-section" id="faq">
            <header class="tools-section-header">
                <h2>Domande frequenti</h2>
            </header>
            <div class="tools-faq">
                                <details class="tools-faq-item">
                    <summary>Perché non c'è il JS minify?</summary>
                    <div class="tools-faq-answer">Per ridurre i byte JS in modo affidabile serve un parser AST (Terser, esbuild, swc): trasformazioni come rinomina variabili, dead code elimination e mangling richiedono comprensione semantica del codice. Sono librerie pesanti, normalmente integrate in una build pipeline (Webpack, Vite, esbuild). Per minify ad-hoc da terminale: <code>npx terser file.js -c -m</code>.</div>
                </details>
                                <details class="tools-faq-item">
                    <summary>Il CSS minifier collassa colors?</summary>
                    <div class="tools-faq-answer">Si parzialmente: <code>#aabbcc</code> diventa <code>#abc</code> dove possibile (solo se i tre canali hanno entrambi i nibble uguali). Altri micro-ottimizzazioni (rimozione unita' su 0, conversione rgba(0,0,0,1) -> #000) non sono implementate per non rischiare di rompere CSS edge case.</div>
                </details>
                                <details class="tools-faq-item">
                    <summary>HTML minify rompe il rendering?</summary>
                    <div class="tools-faq-answer">Non dovrebbe. Il tool preserva il contenuto di <pre>, <textarea>, <script>, <style>. Edge case: HTML con whitespace significativo nell'inline (es. <code><span>a</span> <span>b</span></code>) può diventare <code><span>a</span><span>b</span></code> con i due span attaccati. Per layout testuali sensibili al whitespace, usare beautify e rivedere a mano.</div>
                </details>
                                <details class="tools-faq-item">
                    <summary>Funziona offline?</summary>
                    <div class="tools-faq-answer">Si. Bookmark per uso offline.</div>
                </details>
                                <details class="tools-faq-item">
                    <summary>JSON minify gestisce JSON con commenti (JSONC)?</summary>
                    <div class="tools-faq-answer">No, JSON.parse rifiuta commenti. Per JSONC: rimuovi commenti via regex prima di pasteare, oppure usa un parser JSONC dedicato (lib jsonc-parser di Microsoft per esempio).</div>
                </details>
                                <details class="tools-faq-item">
                    <summary>C'e' un limit di dimensione?</summary>
                    <div class="tools-faq-answer">Niente di hardcoded. File HTML/CSS/JSON da 1-2 MB sono comodi. Oltre i 10 MB l'UI può diventare lenta. Per file enormi: <code>html-minifier-terser</code> CLI.</div>
                </details>
                                <details class="tools-faq-item">
                    <summary>XML beautify gestisce CDATA section?</summary>
                    <div class="tools-faq-answer">Tratta <![CDATA[...]]> come elemento da preservare. Verificare il risultato per casi complessi (CDATA con tag interni testuali che il parser potrebbe confondere).</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="Foto profilo Maurizio Fonte"
         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">Consulente IT senior - Backend Engineer, Cybersecurity, AI/LLM</p>
        <p class="tools-author-bio-text">Operativo nel settore IT dal 2005, freelance con P.IVA dal 2014. Lavoro su backend PHP/Laravel/Symfony, infrastrutture Linux, cybersecurity applicata e integrazione LLM in produzione per PMI italiane. Ogni strumento qui pubblicato nasce da un problema reale incontrato sul lavoro.</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>Chi sono</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>Chi sviluppa questi strumenti?</h2>
                <p>Maurizio Fonte, consulente IT senior con oltre 20 anni di esperienza in PHP, Laravel, infrastrutture Linux, cybersecurity e integrazione AI/LLM in azienda. Backend di produzione, modernizzazione di codice legacy, audit di sicurezza, agenti AI e MCP server custom: il lavoro che sta dietro a questi strumenti.</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>                    Conosci 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">
                Strumento sviluppato da                <a href="https://www.mauriziofonte.it/pages/about"><strong>Maurizio Fonte</strong></a>
                <span class="tools-footer-soft-role">Consulente IT senior - PHP, Cybersecurity, AI per PMI</span>
            </p>
            <p class="tools-footer-soft-text">
                Per consulenza professionale o progetti su misura,                <a href="https://www.mauriziofonte.it/">visita il sito principale</a>.
            </p>
        </div>

        <div class="tools-footer-soft-links">
            <a href="/strumenti/">Tutti gli strumenti</a>
            <a href="https://www.mauriziofonte.it/pages/about">Chi sono</a>
            <a href="https://www.mauriziofonte.it/pages/contattami">Contattami</a>
            <a href="/strumenti/privacy-policy">Privacy policy</a>
            <a href="/strumenti/cookie-policy">Cookie policy</a>
                        <a href="/tools/html-css-js-minifier" data-tools-lang-switch="en">
                <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> English            </a>
                    </div>
    </div>

    <div class="tools-footer-bottom">
        <p>© 2026 Maurizio Fonte · Consulente IT senior - Backend, Cybersecurity, AI per PMI italiane</p>
    </div>
</footer>
<div id="tools-cookie-banner" class="tools-cookie-banner" hidden role="dialog" aria-live="polite" aria-label="Banner informativo cookie">
    <div class="tools-cookie-banner-inner">
        <p class="tools-cookie-banner-text">
            Tutti i cookie sono essenziali per il corretto funzionamento di questo sito e non possono essere disattivati. Scopri di più nella nostra             <a href="/strumenti/cookie-policy">Policy per i cookie</a>
        </p>
        <div class="tools-cookie-banner-actions">
            <button type="button" data-tools-banner-ack class="tools-btn-primary">Ho compreso</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>