บีบอัดไฟล์ SVG

SVG (Scalable Vector Graphics) ไม่ได้ประกอบด้วยพิกเซล — มันคือไฟล์ข้อความที่เขียนด้วย XML ที่อธิบายรูปทรง เส้นทาง และสีเป็นคำสั่งทางคณิตศาสตร์ นี่คือเหตุผลที่โลโก้ SVG ยังคมชัดสมบูรณ์ในทุกขนาด ตั้งแต่ไอคอนขนาดเล็กไปจนถึงป้ายโฆษณาขนาดใหญ่ และเป็นเหตุผลที่มันเป็นรูปแบบที่เลือกใช้สำหรับไอคอน โลโก้ และภาพประกอบบนเว็บ เพราะมันเป็นโค้ด ไม่ใช่กริดแรสเตอร์ การบีบอัด SVG จึงหมายถึงการทำความสะอาดโค้ดนั้น ไม่ใช่การทิ้งรายละเอียดทางสายตา — การประหยัดจึงแทบจะปราศจากการสูญเสียคุณภาพ

เครื่องมือออกแบบอย่าง Illustrator, Figma และ Sketch ส่งออก SVG ที่ถูกต้องทางเทคนิคแต่เต็มไปด้วยความรก ภาระนี้สะสมอย่างรวดเร็ว โดยเฉพาะเมื่อคุณฝังไอคอนหลายสิบตัวลงในหน้าเดียว:

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

MiCompress ย่อ SVG ของคุณในแบบที่เครื่องมือ build จะทำ: มันลบเศษของโปรแกรมแก้ไขและคอมเมนต์ ปัดพิกัดให้เป็นความละเอียดที่สมเหตุสมผล ยุบแอตทริบิวต์ซ้ำซ้อน ลบองค์ประกอบที่ซ่อนและว่างเปล่า และบีบช่องว่างที่ไม่จำเป็น ภาพที่แสดงผลเหมือนกันทุกไบต์ทางสายตาเพราะไม่มีการเปลี่ยนแปลงใด ๆ เหล่านี้แตะต้องรูปทรงจริง — เพียงแต่วิธีเขียนเท่านั้น ผลลัพธ์คือ SVG ที่เล็กลงและสะอาดขึ้นซึ่งแสดงผลเร็วขึ้นและง่ายต่อการฝังโดยตรงลงใน HTML หรือ CSS ของคุณ

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

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