Minifikator in formater HTML na spletu — brezplačno, brez nalaganja

Prilepi HTML spodaj, da ga bodisi minificiraš — odstraniš komentarje, odvečne atribute in dodaten presledek — bodisi polepšaš v berljivo, zamaknjeno oznako. Obe smeri tečeta v celoti v tvojem brskalniku z resničnim razčlenjevalnikom HTML, ne z regex trikom, tako da vsebina znotraj <pre> in <textarea> ostane nedotaknjena.

Kaj je to orodje?

Minifikator HTML odstrani vse, kar brskalnik ne potrebuje za pravilno prikazovanje strani: komentarje, dodaten presledek med oznakami, odvečne atribute, kot je type="text/javascript", in izbirne zaključne poševnice. Rezultat je funkcionalno enak HTML, ki se prenese in razčleni hitreje.

To orodje temelji na html-minifier-terser, istem minifikatorju, ki ga uporabljajo priljubljena gradbena orodja, zato razume strukturo HTML-ja namesto slepega odstranjevanja presledkov — ne dotakne se vsebine, občutljive na oblikovanje, znotraj <pre>, <textarea> ali vgrajenih blokov <script>/<style>, poleg tega pa minificira tudi CSS in JS, vgrajen v tvojo oznako.

Zakaj ga uporabiti?

Resničen razčlenjevalnik pod kapoto, ne regex — varen pri robnih primerih, kot so bloki <pre>, vgrajeni skripti in pogojni komentarji.
Minificira tudi vgrajeno vsebino <style> in <script>, ne le okoliško oznako.
Natanko vidiš, koliko bajtov si prihranil, preden datoteko pošlješ naprej.
Način Format spremeni stisnjen, enovrstičen HTML nazaj v nekaj, kar lahko človek bere in ureja.
100 % lokalna obdelava — tvoja oznaka in karkoli zasebnega v njej nikoli ne zapusti tvojega brskalnika.

Kako ga uporabljati

Prilepi svoj HTML v vnosno polje ali klikni »Load Example«, da preizkusiš vzorec.
Klikni »Minify«, da ga stisneš, ali »Format«, da ga polepšaš z 2-presledkovnim zamikom.
Preveri sporočilo pod poljema — način minify prikaže zmanjšanje velikosti, če HTML-ja ni mogoče razčleniti, pa boš videl natančno napako namesto pokvarjenega izpisa.
Klikni »Copy«, da prevzameš rezultat.

Primer

Vnos

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

Rezultat

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

Komentarji, zamik in prelomi vrstic so odstranjeni; doctype je skrajšan. Vidna stran se prikaže enako.

Praktični nasveti

Minificiraj tik pred uvedbo, ne med razvojem — berljiv HTML hrani v izvorni kontroli in minificiraj le gradbeni izpis.
Če se stran po minifikaciji obnaša nenavadno, preveri JavaScript, ki se zanaša na natančen presledek znotraj besedilnih vozlišč (redko, a se zgodi pri nekaterih starejših pripomočkih).
Formatiranje minificiranega HTML-ja z žive strani je hiter način za pregled njene strukture, preden napišeš strgalnik ali odpraviš napako pri postavitvi.
Kombiniraj z minifikatorjema CSS in JS spodaj, če tvoj gradbeni proces hrani sloge in skripte v ločenih datotekah.

Kje se to prilega resničnim delovnim tokovom

Statične strani, e-poštne predloge in pristajalne strani, izdelane ročno, pogosto pošiljajo z istim zamikom in komentarji, uporabljenimi med razvojem. Minifikacija pred uvedbo obreže resnično, čeprav zmerno, količino teže prenosa — pri HTML-ju za e-pošto pa lahko število znakov vpliva na Gmailov prag za obrezovanje, tako da ima manjša oznaka funkcionalno korist onkraj hitrosti.

Smer Format je enako uporabna v obratni smeri: lepljenje minificirane strani iz view-source in njeno preoblikovanje je pogosto najhitrejši način za razumevanje strukture konkurenčne pristajalne strani ali odpravljanje napak v vdelavi tretje osebe.

→ CSS minifikator · JS Minifikator

Pogosti primeri uporabe

Obrezovanje bajtov s statične pristajalne strani ali e-poštne predloge pred uvedbo v produkcijo.
Preoblikovanje minificiranega HTML odlomka, povlečenega iz view-source, da razumeš njegovo strukturo.
Čiščenje HTML-ja, prilepljenega iz WYSIWYG urejevalnika ali izvoza CMS, ki pogosto nosi odvečen presledek.
Hitro preverjanje, ali je ročno napisan odlomek HTML-ja pravilno oblikovan, saj se napaka pri razčlenjevanju pokaže kot jasna napaka.

Pogosta vprašanja

Ali se moj HTML kam naloži?

Ne. Minifikacija in formatiranje potekata lokalno v tvojem brskalniku z JavaScriptom. Nič, kar prilepiš, se ne pošlje na strežnik, zato je varno za uporabo z internimi predlogami ali še neobjavljenimi stranmi.

Ali bo minifikacija pokvarila mojo stran?

Ne bi smela — orodje uporablja resničen razčlenjevalnik HTML (html-minifier-terser), ki razume strukturo oznak, zato ohrani na presledke občutljive elemente, kot sta <pre> in <textarea>, in ne bo napačno združilo atributov. Po minifikaciji vedno preveri kritične strani, še posebej, če se zanašaš na nenavadne vgrajene skripte.

Ali minificira tudi CSS in JavaScript znotraj HTML-ja?

Da. Vgrajeni bloki <style> in <script> se minificirajo na mestu z istima pogonoma kot namenska orodja za minifikacijo CSS in JS, tako da ti jih ni treba ročno izvleči.

Za koliko se HTML tipično zmanjša?

Odvisno je, koliko presledka, komentarjev in oblikovanja je imel izvirnik — ročno napisan HTML z veliko zamikanja in komentarjev se pogosto skrči za 20–40 %. HTML, ustvarjen z ogrodji, ki je že kompakten, prihrani manj.

Ali lahko minificiran HTML pretvorim nazaj v berljivo obliko?

Da — prilepi minificirani HTML in namesto »Minify« klikni »Format«, da dobiš nazaj pravilno zamaknjeno, berljivo oznako.

Minifikator in formater HTML