ตัวบีบอัด HTML

วางโค้ดบางส่วน เนื้อหาอีเมล หรือทั้งหน้าเว็บได้สูงสุด 1,000,000 อักขระ

ถัดไป: เลือกตัวเลือก

วาง HTML หรือเปิดไฟล์ HTML เลือกว่าจะลบออกมากแค่ไหน แล้วคัดลอกหรือดาวน์โหลดเวอร์ชันที่เล็กลงพร้อมดูว่าประหยัดได้กี่ไบต์ ระดับปลอดภัยจะไม่ทำให้คำสองคำติดกัน หน้าเว็บจึงแสดงผลและทำงานเหมือนเดิม และยังย่อ CSS กับ JavaScript แบบอินไลน์ให้ด้วย

วิธีใช้ตัวบีบอัด HTML

  1. 1

    เพิ่ม HTML ของคุณ

    วางมาร์กอัปลงในตัวแก้ไข หรือเปิดไฟล์ .html, .htm หรือ .xhtml ที่บันทึกเป็น UTF-8 ได้สูงสุด 1,000,000 อักขระ

  2. 2

    เลือกระดับและตัวเลือก

    ใช้ระดับปลอดภัยได้กับ HTML ทุกแบบ หรือเลือกระดับสูงสุดสำหรับหน้าเว็บที่สมบูรณ์ที่คุณจะทดสอบ จากนั้นเลือกว่าจะลบคอมเมนต์และย่อ CSS กับ JavaScript แบบอินไลน์หรือไม่

  3. 3

    คัดลอกหรือดาวน์โหลดผลลัพธ์

    ตรวจสอบ HTML ที่ย่อแล้วและขนาดไฟล์ จากนั้นคัดลอกหรือดาวน์โหลดเป็นไฟล์ หากเปลี่ยนตัวเลือกในหน้าผลลัพธ์ ระบบจะย่อใหม่อีกครั้ง

สิ่งที่การย่อเปลี่ยนแปลง

เครื่องมือนี้ใช้ html-minifier-terser ซึ่งเป็นไลบรารีย่อขนาด HTML แบบโอเพนซอร์สที่มีผู้ใช้อย่างแพร่หลาย ร่วมกับ clean-css สำหรับ CSS และ Terser สำหรับ JavaScript ทั้งสองระดับจะคงช่องว่างระหว่างคำและระหว่างแท็กอินไลน์ เช่น <b> และ <a> ไว้ ส่วนระดับสูงสุดจะลดขนาดได้มากกว่าในหน้าเว็บที่สมบูรณ์

การเปลี่ยนแปลง ปลอดภัย สูงสุด
การขึ้นบรรทัดใหม่และช่องว่างที่ติดกัน เหลือช่องว่างเดียว เหลือช่องว่างเดียว และหายไประหว่างบล็อก เช่น <div> และ <li>
ช่องว่างระหว่างคำและแท็กอินไลน์ คงไว้ คงไว้
แท็กที่ไม่บังคับ เช่น </p>, </li>, <head> และ <body> คงไว้ ลบออก
เครื่องหมายอัญประกาศรอบค่าแอตทริบิวต์ คงไว้ ลบออกในกรณีที่ HTML อนุญาต
แอตทริบิวต์บูลีน เช่น checked="checked" คงไว้ ย่อเป็น checked
แอตทริบิวต์ class, id และ style ที่ว่างเปล่า คงไว้ ลบออก
เครื่องหมายทับปิดใน <br/> คงไว้ ลบออก
type="text/javascript" และ type="text/css" ลบออก ลบออก

XHTML: เมื่อคุณเปิดไฟล์ .xhtml หรือเมื่อ HTML ขึ้นต้นด้วยการประกาศ XML เช่น <?xml version="1.0"?> ทั้งสองระดับจะคงแท็กที่ไม่บังคับ เครื่องหมายอัญประกาศรอบค่าแอตทริบิวต์ แอตทริบิวต์บูลีน เช่น checked="checked" และเครื่องหมายทับปิดไว้ และจะไม่ย่อ JavaScript ผลลัพธ์จึงยังอ่านเป็น XML ได้

ตัวเลือก

  • ลบคอมเมนต์ (เปิดเป็นค่าเริ่มต้น): ลบคอมเมนต์ทั่วไป แต่คอมเมนต์ที่ขึ้นต้นด้วย <!--! (เช่น ข้อความเรื่องสัญญาอนุญาต) คอมเมนต์ server-side include (SSI) และคอมเมนต์แบบมีเงื่อนไขของ Internet Explorer จะยังคงอยู่
  • ย่อ CSS (เปิดเป็นค่าเริ่มต้น): CSS ในองค์ประกอบ <style> และแอตทริบิวต์ style จะสั้นลง ส่วน @import จะคงไว้ตามเดิมและไม่มีการดาวน์โหลดสิ่งใด
  • ย่อ JavaScript (เปิดเป็นค่าเริ่มต้น): สคริปต์แบบอินไลน์และแอตทริบิวต์เหตุการณ์ เช่น onclick จะสั้นลง ชื่อตัวแปรภายในจะสั้นลง ชื่อระดับโกลบอลจะคงเดิม และคอมเมนต์สัญญาอนุญาตแบบ /*! ... */ จะยังคงอยู่ ส่วนเนื้อหาของข้อมูลที่มีโครงสร้าง เช่น JSON-LD จะไม่ถูกย่อ

สิ่งที่ไม่มีวันถูกเปลี่ยน

  • ข้อความภายใน <pre> และ <textarea> ซึ่งช่องว่างและการขึ้นบรรทัดใหม่จะแสดงบนหน้าเว็บ
  • การอ้างอิงอักขระ เช่น &nbsp;, &amp; และ &eacute;
  • บล็อก PHP (<?php ... ?>) และบล็อกแบบ ASP (<% ... %>) รวมถึงทุกอย่างที่อยู่ระหว่างคอมเมนต์ <!-- htmlmin:ignore --> สองตัว
  • doctype, แองเคอร์ <a name>, type="text" ในช่องป้อนข้อมูล รวมถึงตัวพิมพ์เล็กพิมพ์ใหญ่และเครื่องหมายทับปิดภายใน SVG

ข้อความแจ้งที่คุณอาจเห็น

  • อ่านสคริปต์ไม่ได้: สคริปต์แบบอินไลน์หรือแอตทริบิวต์เหตุการณ์ที่ไม่ใช่ JavaScript ที่ถูกต้องในตัวเองจะถูกคงไว้โดยไม่ย่อ และเครื่องมือจะแสดงบรรทัดและคอลัมน์ของข้อผิดพลาด ส่วนที่เหลือของหน้ายังคงถูกย่อตามปกติ
  • อ่านบล็อก CSS ไม่ได้: CSS ส่วนนั้นจะถูกคงไว้โดยไม่ย่อ
  • ชุดอักขระที่ไม่ใช่ UTF-8: ไฟล์ที่ดาวน์โหลดจะบันทึกเป็น UTF-8 เสมอ จึงควรเปลี่ยน <meta charset> ของหน้าเป็น UTF-8 หรือคัดลอกผลลัพธ์ไปใส่ในไฟล์ของคุณเอง
  • ไม่มีส่วนที่ลดได้: HTML เล็กที่สุดเท่าที่ตัวเลือกเหล่านี้ทำได้แล้ว

หากองค์ประกอบ <script> หรือ <style> ไม่มีแท็กปิด จะไม่มีสิ่งใดถูกย่อ และเครื่องมือจะแสดงบรรทัดและคอลัมน์ที่องค์ประกอบนั้นเริ่มต้น ไม่ว่าจะใช้ระดับใด ให้เปิดหน้าที่ย่อแล้วและลองใช้งานให้ทั่วก่อนเผยแพร่

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

ถ้าใช้ระดับปลอดภัย ใช่ ช่องว่างจะถูกรวมเหลือช่องเดียวแต่ไม่ถูกลบ ดังนั้น <b>Hello</b> <i>world</i> ยังคงอ่านได้ว่า “Hello world” และองค์ประกอบที่วางเรียงกันยังคงมีระยะห่างเหมือนเดิม มีเพียงข้อความที่ CSS แสดงโดยคงช่องว่างไว้ เช่น white-space: pre เท่านั้นที่อาจเปลี่ยนไป

ใช้กับหน้าเว็บที่สมบูรณ์ซึ่งคุณทดสอบก่อนเผยแพร่ ระดับนี้ลดขนาดได้มากขึ้นด้วยการลบช่องว่างระหว่างบล็อกและแท็กที่ไม่บังคับ เช่น </p> ควรตรวจสอบสองเรื่อง คือองค์ประกอบที่วางเรียงกันด้วย display: inline-block อาจไม่มีระยะห่างระหว่างกันอีก และส่วนย่อยของ HTML ที่ถูกลบ </p> ตัวสุดท้ายออกไปอาจดึง HTML ที่เพิ่มต่อท้ายเข้าไปอยู่ข้างใน

เมื่อเปิดลบคอมเมนต์ คอมเมนต์ทั่วไปจะถูกลบ ส่วนคอมเมนต์ที่ขึ้นต้นด้วย <!--! คอมเมนต์ server-side include เช่น <!--#include virtual="/footer.html" --> และคอมเมนต์แบบมีเงื่อนไขของ Internet Explorer เช่น <!--[if IE]> จะยังคงอยู่ หากต้องการเก็บบางส่วนไว้ตามที่เขียนทุกประการ ให้วางส่วนนั้นไว้ระหว่างคอมเมนต์ <!-- htmlmin:ignore --> สองตัว โดยตัวทำเครื่องหมายทั้งสองจะถูกลบออก

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

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

สูงสุด 1,000,000 อักขระ ทั้งแบบวางหรือเปิดจากไฟล์ที่บันทึกเป็น UTF-8 หากไฟล์ใช้การเข้ารหัสอื่น เครื่องมือจะแจ้งให้ทราบ ให้เปิดไฟล์ในโปรแกรมแก้ไข คัดลอก HTML แล้ววางที่นี่แทน การย่อที่ใช้เวลานานกว่า 30 วินาทีจะถูกหยุด ในกรณีนั้นให้ลองใช้ HTML ส่วนที่สั้นลง

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

ตัวสร้างการตั้งค่า Webpack

สร้างไฟล์ webpack.config.js สำหรับ webpack 5 จากแบบฟอร์มสั้นๆ ตั้งค่า entry, โฟลเดอร์ output และ mode จากนั้นเปิด TypeScript, Babel, CSS loader, HtmlWebpackPlugin และ dev server

ตัวแปลง Timestamp

แปลง timestamp ของ Unix ในหน่วยวินาทีหรือมิลลิวินาทีเป็นวันที่ที่อ่านง่ายในเขตเวลา UTC และเขตเวลาหลัก และแปลงวันที่กลับเป็นค่า epoch

ตารางอ้างอิง ASCII

ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL

เครื่องสุ่มที่อยู่

สร้างระเบียนคล้ายที่อยู่ 1–20 รายการสำหรับแบบจำลองและการทดสอบ ด้วยรูปแบบประเทศแบบย่อ

ตัวลดรูปพีชคณิตบูลีน

ประเมินนิพจน์บูลีนสำหรับทุกชุดอินพุตและดูตารางค่าความจริงที่สมบูรณ์ รองรับตัวแปรสูงสุดห้าตัวและตัวดำเนินการ &, |, !, ^

ตารางอ้างอิงแป้นพิมพ์ลัด

ค้นหาแป้นพิมพ์ลัดเริ่มต้นตามเอกสารของ VS Code, Chrome และ Bash ที่ใช้ GNU Readline บน macOS, Windows และ Linux

เครื่องมือนี้มีให้บริการในภาษาอื่น