HTML-tiivistäjä ja muotoilija verkossa — ilmainen, ei latausta

Liitä HTML alle joko tiivistääksesi sen — poistamalla kommentit, tarpeettomat attribuutit ja ylimääräisen tyhjätilan — tai kaunistaaksesi sen luettavaksi, sisennetyksi merkinnäksi. Molemmat suunnat toimivat kokonaan selaimessasi käyttäen oikeaa HTML-jäsennintä, ei regex-temppua, joten sisältö <pre>- ja <textarea>-elementeissä pysyy ehjänä.

Mikä tämä työkalu on?

HTML-tiivistäjä poistaa kaiken, mitä selain ei tarvitse renderöidäkseen sivun oikein: kommentit, ylimääräisen tyhjätilan tagien välillä, tarpeettomat attribuutit kuten type="text/javascript" ja valinnaiset sulkevat kauttaviivat. Tuloksena on toiminnallisesti identtinen HTML, joka latautuu ja jäsentyy nopeammin.

Tämä työkalu on rakennettu html-minifier-terser-kirjastolle, samalle tiivistäjälle, jota käytetään suosituissa build-työkaluissa, joten se ymmärtää HTML-rakennetta sen sijaan, että se sokeasti poistaisi tyhjätilaa — se ei koske muotoiluherkkää sisältöä <pre>-, <textarea>- tai inline <script>/<style>-lohkoissa, ja se myös tiivistää merkinnässäsi upotetut CSS:n ja JS:n.

Miksi käyttää sitä?

Oikea jäsennin taustalla, ei regex — turvallinen reunatapauksissa kuten <pre>-lohkot, inline-skriptit ja ehdolliset kommentit.
Tiivistää myös upotetun <style>- ja <script>-sisällön, ei vain ympäröivää merkintää.
Näe tarkalleen, kuinka monta tavua säästit ennen tiedoston julkaisua.
Muotoilutila muuttaa pakatun, yksirivisen HTML:n takaisin joksikin, jota ihminen voi lukea ja muokata.
100 % paikallinen käsittely — merkintäsi, ja mitä tahansa yksityistä siinä, ei koskaan poistu selaimestasi.

Käyttöohje

Liitä HTML:si syöttökenttään, tai klikkaa "Load Example" kokeillaksesi näytettä.
Klikkaa "Minify" pakataksesi sen, tai "Format" kaunistaaksesi sen 2 välilyönnin sisennyksellä.
Tarkista viesti laatikoiden alla — tiivistystila näyttää koon pienenemisen; jos HTML:ää ei voida jäsentää, näet tarkan virheen rikkinäisen tulosteen sijaan.
Klikkaa "Copy" saadaksesi tuloksen.

Esimerkki

Syöte

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <!-- greeting -->
    <p class="greeting">
      Hello, world!
    </p>
  </body>
</html>

Tuloste

<!doctype html><html><head><title>Example</title></head><body><p class="greeting">Hello, world!</p></body></html>

Kommentit, sisennykset ja rivinvaihdot poistetaan; doctype lyhennetään. Näkyvä sivu renderöityy identtisesti.

Käytännön vinkkejä

Tiivistä juuri ennen julkaisua, ei kehityksen aikana — pidä luettava HTML versionhallinnassa ja tiivistä vain build-tuloste.
Jos sivu käyttäytyy oudosti tiivistämisen jälkeen, tarkista JavaScript, joka luottaa tarkkaan tyhjätilaan tekstisolmujen sisällä (harvinaista, mutta tapahtuu joidenkin vanhempien widgetien kanssa).
Tiivistetyn HTML:n muotoilu live-sivustolta on nopea tapa tarkastella sen rakennetta ennen kaavintatyökalun kirjoittamista tai ulkoasuongelmien vianetsintää.
Yhdistä alla oleviin CSS- ja JS-tiivistäjiin, jos build-prosessisi pitää tyylit ja skriptit erillisissä tiedostoissa.

Missä tämä liittyy oikeaan työhön

Käsin rakennetut staattiset sivustot, sähköpostimallit ja laskeutumissivut toimitetaan usein samalla sisennyksellä ja kommenteilla, joita käytettiin kehityksen aikana. Tiivistäminen ennen julkaisua leikkaa todellisen, joskin maltillisen, määrän siirtopainoa — ja nimenomaan sähköpostien HTML:lle merkkimäärä joskus vaikuttaa Gmailin katkaisurajaan, joten pienemmällä merkinnällä on toiminnallinen hyöty nopeuden lisäksi.

Muotoilusuunta on yhtä hyödyllinen käänteisesti: minifioidun sivun liittäminen view-sourcesta ja sen uudelleenmuotoilu on usein nopein tapa ymmärtää kilpailijan laskeutumissivun rakennetta tai vianetsiä kolmannen osapuolen upotusta.

→ CSS-minifioija · JS-minifioija

Yleiset käyttötapaukset

Tavujen leikkaaminen staattiselta laskeutumissivulta tai sähköpostimallilta ennen sen julkaisua.
Tiivistetyn HTML-katkelman uudelleenmuotoilu view-sourcesta poimittuna sen rakenteen ymmärtämiseksi.
WYSIWYG-editorista tai CMS-viennistä liitetyn HTML:n siivoaminen, joka usein kantaa ylimääräistä tyhjätilaa.
Nopea tarkistus siitä, onko käsin kirjoitettu HTML-katkelma hyvin muotoiltu, koska jäsennysvirhe näkyy selkeänä virheenä.

Usein kysytyt kysymykset

Ladataanko HTML:ni minnekään?

Ei. Tiivistys ja muotoilu tapahtuvat molemmat paikallisesti selaimessasi JavaScriptillä. Mitään liittämääsi ei lähetetä palvelimelle, joten se on turvallinen käyttää sisäisten mallipohjien tai julkaisemattomien sivujen kanssa.

Rikkooko tiivistäminen sivuni?

Sen ei pitäisi — työkalu käyttää oikeaa HTML-jäsennintä (html-minifier-terser), joka ymmärtää tagirakenteen, joten se säilyttää tyhjätilaherkät elementit kuten <pre> ja <textarea> eikä yhdistä attribuutteja väärin. Tarkista aina kriittiset sivut tiivistämisen jälkeen, erityisesti jos luotat epätavallisiin inline-skripteihin.

Tiivistääkö se myös CSS:n ja JavaScriptin HTML:n sisällä?

Kyllä. Inline <style>- ja <script>-lohkot tiivistetään paikallaan samoilla moottoreilla kuin erilliset CSS- ja JS-tiivistintyökalut, joten sinun ei tarvitse poimia niitä käsin.

Kuinka paljon pienempi HTML tyypillisesti tulee?

Se riippuu siitä, kuinka paljon tyhjätilaa, kommentteja ja muotoilua alkuperäisessä oli — käsin kirjoitettu HTML paljolla sisennyksellä ja kommenteilla kutistuu yleisesti 20–40 %. Jo valmiiksi tiivis kehykseltä generoitu HTML säästää vähemmän.

Voinko muuntaa tiivistetyn HTML:n takaisin luettavaksi muodoksi?

Kyllä — liitä tiivistetty HTML ja klikkaa "Format" "Minify":n sijaan saadaksesi takaisin asianmukaisesti sisennetyn, luettavan merkinnän.

HTML-tiivistäjä ja muotoilija