เครื่องมือบีบอัด HTML

วางโค้ด HTML ของคุณด้านล่างเพื่อบีบอัดและย่อขนาด

HTML ต้นฉบับ

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Example HTML</title>
    <style type="text/css">
      /* This is a sample CSS comment */
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 20px;
        background-color: #f4f4f4;
      }
      .container {
        max-width: 800px;
        margin: 0 auto;
        background: #fff;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }
    </style>
  </head>
  <body>
    <div class="container">
      
      <h1>HTML Compression Example</h1>
      <p>This is a sample HTML document to demonstrate the HTML compressor.</p>
      <ul>
        <li>Removes comments</li>
        <li>Collapses whitespace</li>
        <li>Removes optional tags</li>
      </ul>
      <button onclick="showMessage()" type="button">Click Me</button>
    </div>

HTML ที่บีบอัดแล้ว

ตัวเลือกการบีบอัด

ลบความคิดเห็น HTMLลบแท็ก HTML ที่ไม่จำเป็นลบแอตทริบิวต์ที่ว่างเปล่าลบช่องว่างที่ไม่จำเป็นย่อแอตทริบิวต์แบบบูลีนย่อขนาด CSS ในแท็ก <style> และแอตทริบิวต์ style (ทดลอง)ย่อขนาด JavaScript ในแท็ก <script> (ทดลอง)

วิธีใช้ เครื่องมือบีบอัด HTML

1
วาง HTML ของคุณ
คัดลอกซอร์สของหน้าเว็บหรือสนิปเพต HTML ลงในช่อง "HTML ต้นฉบับ"
2
เลือกสิ่งที่จะตัดออก
ทำเครื่องหมายตัวเลือกการบีบอัดที่ต้องการ เช่น ลบคอมเมนต์ ยุบช่องว่าง ตัดแอตทริบิวต์ว่าง หรือ minify CSS และ JavaScript แบบอินไลน์
3
บีบอัดโค้ด
คลิก "บีบอัด HTML" เพื่อ minify มาร์กอัป และดูขนาดเดิม ขนาดที่บีบอัดแล้ว และเปอร์เซ็นต์ที่ประหยัดได้

4
คัดลอก HTML ที่ minify แล้ว
ใช้ "คัดลอก HTML ที่บีบอัด" เพื่อนำโค้ดที่ปรับให้เหมาะสมไปใช้ในเว็บไซต์หรือไปป์ไลน์บิลด์ของคุณ

คำถามที่พบบ่อย

ตัวบีบอัด HTML ลบอะไรออกบ้าง

ขึ้นอยู่กับตัวเลือกที่คุณเปิด มันจะตัดคอมเมนต์ HTML, ยุบช่องว่างและการขึ้นบรรทัดที่ไม่จำเป็น, ลบแอตทริบิวต์ว่างและที่เป็นทางเลือก, ยุบแอตทริบิวต์แบบบูลีน และตัดแท็กปิดที่เป็นทางเลือกได้เพื่อลดขนาดไฟล์

มัน minify CSS และ JavaScript แบบอินไลน์ได้ด้วยไหม

ได้ มีตัวเลือกทดลองสำหรับ minify CSS ภายในแท็ก <style> และแอตทริบิวต์ style และ minify JavaScript ภายในแท็ก <script> คุณจึงบีบอัดทั้งหน้าได้ในรอบเดียว

ไฟล์ของฉันจะเล็กลงเท่าไหร่

ขึ้นอยู่กับว่ามาร์กอัปของคุณมีช่องว่างและคอมเมนต์มากเพียงใด แต่เครื่องมือจะแสดงขนาดเดิม ขนาดที่บีบอัด และเปอร์เซ็นต์การลดที่แน่นอน คุณจึงเห็นจำนวนไบต์ที่ประหยัดได้สำหรับไฟล์ของคุณโดยเฉพาะ

การ minify จะทำให้หน้าเว็บของฉันเสียไหม

การลบช่องว่างและคอมเมนต์มาตรฐานปลอดภัยสำหรับ HTML ที่เขียนถูกต้อง ส่วนตัวเลือก minify CSS และ JS ระบุว่าเป็นการทดลอง จึงควรทดสอบผลลัพธ์ โดยเฉพาะหากสคริปต์ของคุณพึ่งพาการจัดรูปแบบหรือคอมเมนต์เฉพาะ

HTML ของฉันถูกอัปโหลดไปยังเซิร์ฟเวอร์ไหม

ไม่ การบีบอัดทำงานทั้งหมดในเบราว์เซอร์ของคุณ โค้ดของคุณจึงอยู่บนอุปกรณ์ เครื่องมือนี้ฟรี ไม่ต้องสมัคร และใช้งานบนมือถือได้

เครื่องมือที่เกี่ยวข้อง

ทำงานต่อด้วยเครื่องมือที่มีประโยชน์เหล่านี้

เครื่องมือแปลง HTML เป็นข้อความ

เครื่องมือจัดรูปแบบ JSON

เครื่องมือแปลงข้อความเป็น HTML

เครื่องมือสร้างรายการ HTML

เครื่องมือสร้างตาราง HTML

เครื่องมือทดสอบ Regex