บีบอัดภาพ PNG โดยไม่ทำให้ความโปร่งใสหายไป

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

เลือกภาพ PNG

ไฟล์ PNG แบบภาพนิ่ง; รุ่นนี้ยังไม่รองรับ APNG · ขีดจำกัดไฟล์: 20 · 5 MB ต่อไฟล์

การบีบอัดที่คำนึงถึงความโปร่งใส

ทำให้ไฟล์ PNG เล็กลงโดยไม่ทำให้งานออกแบบเสียความโปร่งใสและความคมชัด

เลือกกลยุทธ์ PNG ที่คงขอบโปร่งใส ข้อความคมชัด และกราฟิกสีเรียบไว้ครบ

บีบอัด PNG
Alpha

คงความโปร่งใส

คงพิกเซลที่โปร่งใสและโปร่งใสบางส่วนไว้

Lossless

ปกป้องค่าสีหลังถอดรหัส

ปรับการเข้ารหัสให้เหมาะสมโดยไม่ตั้งใจเปลี่ยนค่าพิกเซล

Palette

ลดความหลากหลายของสี

ใช้จำนวนสีน้อยลงเมื่อโลโก้หรือแอสเซ็ต UI ยอมรับได้

Static

หลีกเลี่ยงการสูญเสียแอนิเมชัน

ไฟล์ PNG แบบเคลื่อนไหวยังอยู่นอกเวิร์กโฟลว์นี้

PNG ที่เล็กที่สุดก็ไม่มีประโยชน์ ถ้าความโปร่งใสหรือขอบที่คมชัดหายไป

องค์ประกอบของ PNG

ปกป้องอัลฟา ขอบ และโครงสร้างสี

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

อัลฟา

คงพิกเซลโปร่งใสให้เป็นไปตามที่ตั้งใจ

ทดสอบขอบแบบแอนติอะไลแอสบนพื้นหลังสว่างและเข้ม เพื่อให้การแบน (flattening) หรือขอบเงา (halo) ไม่ถูกซ่อนอยู่ในพรีวิวแบบพื้นหลังเดียว

สี

ตรวจเกรเดียนต์และตัวอักษรขนาดเล็ก

การเปลี่ยนพาเลตสีอาจกระทบโทนที่เนียนและรายละเอียดระดับ 1 พิกเซล แม้ภาพตัวอย่างขนาดเล็กที่มองจากไกลจะดูโอเคก็ตาม

ตรวจสอบ

เปรียบเทียบไฟล์ต้นฉบับกับไฟล์ที่ส่งออก

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

กลยุทธ์ PNG

เลือกระหว่างคงพิกเซลให้ตรงเป๊ะ หรือเปลี่ยนพาเลตสีแบบตรวจทานแล้ว

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

ความแม่นยำ

เลือกวิธีแบบไม่สูญเสียคุณภาพที่ตรวจสอบได้

ใช้เมื่อสีตามสัญญา พิกเซลของอินเทอร์เฟซ หรือค่าขอบโปร่งใส ต้องคงอยู่โดยไม่มีการเปลี่ยนแปลงหลังถอดรหัส

พาเลตสี

ลดจำนวนสีหลังตรวจทานเท่านั้น

งานภาพสีแบนอาจรับจำนวนสีที่น้อยลงได้ แต่เกรเดียนต์ สกรีนช็อต และภาพประกอบที่มีพื้นผิว อาจเกิดอาการเป็นแถบ (banding) ให้เห็นชัด

งานถัดไป

เลือกเครื่องมือที่เกี่ยวข้องเมื่อจำเป็น

ใช้เวิร์กโฟลว์ JPG กับภาพถ่ายที่ทึบเท่านั้นเมื่อไม่จำเป็นต้องมีความโปร่งใส และคงใช้ PNG ไว้เมื่อภาพต้องมีพิกเซลโปร่งใส

ตรวจสอบผลลัพธ์ของคุณ

ตรวจขอบโปร่งใสและรายละเอียดเล็กๆ

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

ตรวจขอบนุ่ม

วาง PNG บนพื้นหลังสว่างและเข้มเพื่อให้เห็นขอบรุ่ยรอบเส้นผม เงา หรือข้อความที่ทำแอนติอะไลแอส

สีแบน

ตรวจสีแบน

ตรวจโลโก้และกราฟิกของอินเทอร์เฟซว่ามีสีแบรนด์เปลี่ยนไปหรือเฉดหายไปหรือไม่ การลดพาเลตสีอาจส่งผลกับส่วนเหล่านี้ต่างจากภาพถ่าย

พิกเซลตรงเป๊ะ

ตรวจพิกเซลตรงเป๊ะ

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

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

  • เวิร์กโฟลว์ PNG ถูกออกแบบมาเพื่อคงความโปร่งใสแบบอัลฟ่า ตรวจสอบผลลัพธ์ที่ประมวลผลจริงใน VisionStory ก่อนแทนที่แอสเซ็ตต้นฉบับ