Çevrimiçi HTML Küçültücü ve Biçimlendirici — Ücretsiz, Yükleme Gerekmez

Aşağıdaki HTML kodunu yapıştırarak ya kodu küçültebilirsiniz — yorumları, gereksiz öznitelikleri ve fazladan boşlukları kaldırarak — ya da okunabilir, girintili bir biçimle düzenleyebilirsiniz. Her iki işlem de, düzenli ifade hilesi değil, gerçek bir HTML ayrıştırıcısı kullanılarak tamamen tarayıcınızda gerçekleştirilir; bu sayede <pre> ve <textarea> etiketleri içindeki içerik bozulmadan kalır.

Bu Araç Nedir?

Bir HTML küçültücü, tarayıcının bir sayfayı doğru şekilde görüntülemek için ihtiyaç duymadığı her şeyi kaldırır: yorumlar, etiketler arasındaki fazladan boşluklar, type="text/javascript" gibi gereksiz öznitelikler ve isteğe bağlı kapanış eğik çizgileri. Sonuçta, işlevsel olarak aynı olan ancak daha hızlı indirilen ve işlenen bir HTML elde edilir.

Bu araç, popüler derleme araçlarında da kullanılan html-minifier-terser üzerine kurulmuştur; bu sayede boşlukları körü körüne silmek yerine HTML yapısını anlar — <pre>, <textarea> veya satır içi <script>/<style> blokları içindeki biçimlendirmeye duyarlı içeriğe dokunmaz ve ayrıca işaretlemenize gömülü CSS ve JS dosyalarını da küçültür.

Neden Kullanmalısınız?

Arka planda gerçek bir ayrıştırıcı kullanılır, düzenli ifade değil — <pre> blokları, satır içi komut dosyaları ve koşullu yorumlar gibi istisnai durumlarda da güvenlidir.
Sadece çevreleyen etiketleri değil, gömülü <style> ve <script> içeriklerini de küçültür.
Dosyayı göndermeden önce tam olarak kaç bayt tasarruf ettiğinizi görün.
Biçimlendirme modu, sıkıştırılmış, tek satırlık HTML’yi insanların okuyabileceği ve düzenleyebileceği bir biçime dönüştürür.
%100 yerel işleme — fiyatlandırma verileriniz ve içindeki tüm özel bilgiler, tarayıcınızdan asla dışarı çıkmaz.

Nasıl Kullanılır

HTML kodunuzu giriş kutusuna yapıştırın veya bir örneği denemek için "Örneği Yükle" seçeneğine tıklayın.
Sıkıştırmak için "Minify" düğmesine tıklayın ya da 2 boşlukluk girintiyle metni düzgün bir şekilde biçimlendirmek için "Format" düğmesine tıklayın.
Kutuların altındaki mesajı kontrol edin — minify modu, boyut azalmasını gösterir; HTML dosyası ayrıştırılamazsa, bozuk çıktı yerine hatanın tam metnini görürsünüz.
Sonucu almak için "Kopyala" düğmesine tıklayın.

Örnek

Giriş

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

Çıkış

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

Yorumlar, girintiler ve satır sonları kaldırılır; doctype kısaltılır. Görüntülenen sayfa aynı şekilde görüntülenir.

Pratik ipuçları

Geliştirme aşamasında değil, dağıtımdan hemen önce küçültün — okunabilir HTML kodunu kaynak kontrolünde tutun ve yalnızca derleme çıktısını küçültün.
Bir sayfa, kod küçültme işleminden sonra garip davranıyorsa, metin düğümleri içindeki boşlukların tam olarak aynı olması gereken JavaScript kodları olup olmadığını kontrol edin (nadir görülür, ancak bazı eski widget’larda bu durum yaşanabilir).
Canlı bir siteden alınan minifiye HTML kodunu biçimlendirmek, bir veri toplama programı yazmadan veya mizanpaj sorunlarını gidermeden önce sitenin yapısını incelemek için hızlı bir yoldur.
Derleme sürecinizde stil ve komut dosyalarını ayrı dosyalarda tutuyorsanız, bunları aşağıdaki CSS ve JS küçültme araçlarıyla birleştirin.

Bunun gerçek iş akışlarında nasıl bir yeri var?

Elle oluşturulan statik siteler, e-posta şablonları ve açılış sayfaları genellikle geliştirme aşamasında kullanılan girintiler ve yorumlarla birlikte yayınlanır. Dağıtımdan önce kodun küçültülmesi, mütevazı da olsa gerçek bir aktarım boyutunda azalma sağlar — özellikle e-posta HTML’si söz konusu olduğunda, karakter sayısı bazen Gmail’in kesme eşiğini etkiler; bu nedenle daha küçük bir işaretleme, hızın ötesinde işlevsel bir fayda sağlar.

"Biçim" seçeneği ters yönde de aynı derecede kullanışlıdır: "Kaynak Görüntüle"den küçültülmüş bir sayfayı yapıştırıp yeniden biçimlendirmek, genellikle bir rakibin açılış sayfasının yapısını anlamanın veya üçüncü taraf bir gömülü öğedeki hataları gidermenin en hızlı yoludur.

→ CSS Küçültücü · JS Küçültücü

Yaygın kullanım örnekleri

Yayına girmeden önce statik bir açılış sayfasından veya e-posta şablonundan gereksiz kısımları ayıklamak.
Yapısını anlamak için “view-source” seçeneğinden alınan minifiye edilmiş bir HTML parçasını yeniden biçimlendirme.
WYSIWYG düzenleyicisinden veya CMS dışa aktarımından yapıştırılan ve genellikle fazla boşluk içeren HTML kodunu temizleme.
El yazısı bir HTML kod parçacığının biçim kurallarına uygun olup olmadığını hızlıca kontrol etmek; zira ayrıştırma hatası açık bir hata olarak ortaya çıkar.

Sıkça Sorulan Sorular

HTML dosyam herhangi bir yere yüklendi mi?

Hayır. Kod küçültme ve biçimlendirme işlemleri, JavaScript kullanılarak tarayıcınızda yerel olarak gerçekleştirilir. Yapıştırdığınız hiçbir şey sunucuya gönderilmez; bu nedenle, dahili şablonlarla veya henüz yayınlanmamış sayfalarla güvenle kullanabilirsiniz.

Kod küçültme işlemi sayfamın çalışmasını engeller mi?

Öyle olmamalı — bu araç, etiket yapısını anlayan gerçek bir HTML ayrıştırıcısı (html-minifier-terser) kullanır; bu sayede <pre> ve <textarea> gibi boşluklara duyarlı öğeleri korur ve öznitelikleri yanlış bir şekilde birleştirmez. Küçültme işleminden sonra, özellikle alışılmadık satır içi komut dosyalarına güveniyorsanız, kritik sayfaları her zaman örnek olarak kontrol edin.

HTML içindeki CSS ve JavaScript dosyalarını da küçültüyor mu?

Evet. Satır içi <style> ve <script> blokları, özel CSS ve JS küçültme araçlarıyla aynı motorlar kullanılarak yerinde küçültülür; bu nedenle bunları manuel olarak ayırmanıza gerek yoktur.

HTML genellikle ne kadar küçülür?

Bu, orijinal kodda ne kadar boşluk, yorum ve biçimlendirme olduğuna bağlıdır — bol miktarda girinti ve yorum içeren elle yazılmış HTML kodları genellikle %20-40 oranında küçülür. Zaten kompakt olan çerçeve tarafından oluşturulan HTML kodlarında ise tasarruf oranı daha az olur.

Küçültülmüş HTML’yi tekrar okunabilir bir biçime dönüştürebilir miyim?

Evet — küçültülmüş HTML kodunu yapıştırın ve "Küçült" yerine "Biçimlendir" seçeneğine tıklayarak, girintileri düzgün ve okunabilir bir şekilde düzenlenmiş bir işaretleme elde edin.

HTML Küçültücü ve Biçimlendirici