แปลง PNG ทึบแสงเป็น WebP และเปรียบเทียบผลลัพธ์

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

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

ค่าที่ตั้งไว้ล่วงหน้าจะรักษาขนาดและเริ่มต้นที่คุณภาพ 90% พร้อมการเหลา ลองไฟล์หนึ่งที่มีข้อความขนาดเล็กและอีกไฟล์หนึ่งมีพื้นหลังภาพถ่าย ตรวจสอบเส้นขอบบาง ตัวอักษรสี และการไล่ระดับสีเรียบ การออกแบบสามารถดูดีได้อย่างรวดเร็วในขณะที่แสดงรัศมีสีข้างฉลากเมื่อแสดงตามขนาดที่ต้องการ

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

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

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

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

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

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