PNG มีชื่อเสียงไม่ดีเรื่องขนาดใหญ่มหึมา และมันสมควรได้รับไอคอนเดียวหนักกว่าภาพถ่ายเต็ม ๆ ได้ยังไงก็ไม่รู้ ข่าวดีคือความบวมส่วนใหญ่นั้นเปล่าประโยชน์ และคุณลอกมันออกได้ขณะที่คงขอบคมชัดและพื้นหลังโปร่งใสที่คุณต้องการ PNG มาตั้งแต่แรก
ทำไม PNG ถึงใหญ่มาก
PNG เป็นรูปแบบ ไม่สูญเสีย ต่างจาก JPEG มันไม่ทิ้งอะไรเลยมันเก็บทุกพิกเซลไว้เป๊ะ นั่นสมบูรณ์แบบสำหรับโลโก้คมชัด ไอคอน และภาพหน้าจอ UI แต่มันหมายความว่าไฟล์ต้องอธิบายข้อมูลจำนวนมากอย่างซื่อสัตย์
ตัวการจริงคือ ความลึกสี PNG มาตรฐานเก็บสีได้สูงสุด 16 ล้านสี (24-bit) บวกช่องความโปร่งใสเต็ม แต่โลโก้ของคุณอาจใช้แค่หนึ่งโหลสี ชุดไอคอนของคุณอาจห้าสิบ ความจุสีที่ไม่ได้ใช้ทั้งหมดนั้นยังกินไบต์เพื่อให้พร้อมใช้ คุณกำลังจ่ายค่าผืนผ้าใบ 16 ล้านสีเพื่อวาดภาพที่ต้องการยี่สิบสี
มีกับดักที่สอง: คนบันทึก ภาพถ่าย เป็น PNG ภาพถ่ายใช้สีหลายล้านและไล่สีที่ละเอียดอ่อนจริง ๆ PNG จึงบีบอัดมันได้ไม่ดีไฟล์ลงเอยด้วยขนาดใหญ่กว่าภาพเดียวกันในแบบ JPEG หรือ WebP ห้าถึงสิบเท่า ถ้า "ปัญหา PNG" ของคุณจริง ๆ แล้วคือภาพถ่าย วิธีแก้คือแปลงมัน ไม่ใช่บีบอัด
การลดจำนวนสี: วิธีแก้ที่คงความโปร่งใส
สำหรับ PNG จริง ๆ สีแบน ขอบคม โปร่งใสท่าที่ชนะคือ การลดจำนวนสี (quantization) แทนที่จะเก็บสีที่เป็นไปได้หลายล้าน ภาพถูกลดเหลือ พาเลตต์ 256 สี ที่เลือกมาอย่างระมัดระวัง เพราะภาพของคุณไม่เคยใช้เกินเศษเสี้ยวของนั้นอยู่แล้ว ผลลัพธ์จึงดูเหมือนกันขณะที่ไฟล์ลดลง 60–80%
ส่วนที่คนกังวล: สิ่งนี้ทำลายพื้นหลังโปร่งใสไหม? ไม่ การลดจำนวนสีลดพาเลตต์สี แต่ ช่องความโปร่งใส (อัลฟา) ถูกรักษาไว้ โลโก้ของคุณยังลงบนพื้นหลังใด ๆ ได้อย่างสะอาดไม่มีกล่องขาว ไม่มีขอบเทา นี่คือเทคนิคเดียวกับที่เครื่องมือปรับ PNG สไตล์ "tinify" ที่รู้จักกันดีใช้ และเป็นเหตุผลที่พวกเขาย่อ PNG โปร่งใสได้อย่างมาก
เครื่องมือบีบอัดภาพ ของ IMG.DIY ใช้การลดเหลือ 256 สีกับ PNG โดยอัตโนมัติ คุณไม่ต้องเลือกตัวเลขคุณภาพไม่มีแถบเลื่อนคุณภาพสำหรับรูปแบบไม่สูญเสียคุณแค่วางไฟล์ลงไปและได้ PNG ที่เล็กกว่ามากโดยความโปร่งใสยังครบ
เช็กลิสต์ด่วนสำหรับ PNG โปร่งใส
- ยืนยันว่ามันเป็นกราฟิกจริง ๆ ไม่ใช่ภาพถ่าย โลโก้ ไอคอน ภาพประกอบ และภาพ UI → บีบอัดเป็น PNG ภาพถ่าย → แปลงเป็น WebP (ซึ่งรองรับความโปร่งใสด้วย) หรือ JPEG (ซึ่งไม่รองรับ)
- ตัดมิติที่ใหญ่เกิน ไอคอน 2000px ที่แสดงที่ 200px คือพิกเซล 100 เท่าของที่มันต้องการ จำกัดความกว้างก่อนเครื่องมือบีบอัดมีตัวเลือกจำกัดความกว้าง
- ลดจำนวนสี ปล่อยให้การลดเหลือ 256 สีทำงานหนัก ความโปร่งใสอยู่รอด
- ตรวจขอบ เปิดที่ 100% และเช็กขอบอัลฟากับพื้นหลังที่รกเพื่อยืนยันว่ามันสะอาด
ทำเป็นชุด เก็บให้เป็นส่วนตัว
ถ้าคุณมีชุดไอคอนทั้งชุดหรือโฟลเดอร์ของกราฟิกที่ส่งออก คุณไม่ต้องทำทีละอัน เครื่องมือบีบอัด จัดการเป็นชุดและส่งคืนเป็น ZIP และมันไม่เคยส่งออกไฟล์ที่ใหญ่กว่าต้นฉบับดังนั้นโฟลเดอร์ของ PNG ที่แน่นอยู่แล้วจะไม่โตขึ้นโดยบังเอิญ
ทุกอย่างทำงาน ทั้งหมดในเบราว์เซอร์ของคุณ ด้วย Canvas และ WebAssembly PNG ของคุณไม่เคยถูกอัปโหลดไปที่ไหน และหลังเข้าครั้งแรก เครื่องมือถูกแคชและทำงานแบบออฟไลน์ได้ บีบอัดแอสเซตแบรนด์ของลูกค้าบนรถไฟที่ไม่มีสัญญาณและไม่มีอะไรออกจากแล็ปท็อปของคุณ
ประเด็นสำคัญ: PNG ใหญ่เพราะมันกักตุนความจุสีที่คุณไม่ได้ใช้ ลดเหลือ 256 สี คงความโปร่งใสไว้ แล้วดูไฟล์หดลงโดยไม่มีการเปลี่ยนแปลงที่มองเห็น