ตัวแปลง PNG เป็น WebP
PNG ไม่สูญเสียแต่เทอะทะสำหรับเว็บ WebP รองรับความโปร่งใสและมักให้ไฟล์เล็กกว่ามากสำหรับโลโก้ ไอคอน และภาพประกอบ แปลงแอสเซ็ต PNG ในเครื่องก่อนดีพลอยสู่โปรดักชัน
วิธีแปลง PNG เป็น WebP
1. อัปโหลด PNG (มีหรือไม่มีอัลฟา)
2. เลือกการตั้ง WebP สูญเสียหรือไม่สูญเสียหากมี
3. เปรียบเทียบขนาดเอาต์พุตกับ PNG ต้นฉบับ
4. ดาวน์โหลดไฟล์ WebP
ตัวอย่าง
โลโก้บนไซต์การตลาด
โลโก้ PNG 120 KB อาจกลายเป็น WebP 40 KB ด้วยความโปร่งใสเหมือนกัน — โหลดส่วนหัวเร็วขึ้น
สไปรต์ชีตเกม
สไปรต์สีเรียบบีบอัดรุนแรงในโหมด WebP ที่ไม่สูญเสียเทียบกับ PNG
กราฟิกแอปสโตร์
แทนที่ภาพหน้าจอ PNG ใหญ่ในแอสเซ็ตที่รวมไว้เมื่อรันไทม์รองรับ WebP
เมื่อ PNG เป็น WebP ช่วย
• เมื่อต้องการความโปร่งใสอัลฟาบนเว็บด้วยไบต์ที่น้อยกว่า
• เมื่อย้ายฟรอนต์เอนด์ที่หนัก PNG ไปรูปแบบสมัยใหม่
• เมื่อ Lighthouse ชี้แอสเซ็ต PNG ที่ใหญ่เกินไป
PNG กับ WebP สำหรับแอสเซ็ต UI
นักออกแบบส่งออก PNG จากนิสัย สำหรับเว็บโปรดักชัน WebP พร้อมความโปร่งใสมักลดขนาดส่งครึ่งหนึ่ง ทำให้การแปลงอัตโนมัติใน CI หรือใช้เครื่องมือนี้สำหรับแอสเซ็ตเฉพาะกิจ
คำถามที่พบบ่อย
คงความโปร่งใสหรือไม่?
ใช่ — WebP รองรับช่องอัลฟาคล้าย PNG
WebP ไม่สูญเสียหรือสูญเสีย?
กราฟิกสีเรียบมักเหมาะกับ WebP ที่ไม่สูญเสีย รูปที่ฝังใน PNG อาจใช้ WebP สูญเสียเพื่อขนาดเล็กกว่า
สีจะคลาดหรือไม่?
โหมดไม่สูญเสียควรตรง PNG พอดี โหมดสูญเสียอาจแสดงความต่างเล็กน้อยในไล่สี
ใช้ WebP ใน CSS background-image ได้หรือไม่?
ได้ในเบราว์เซอร์สมัยใหม่ทั้งหมด ให้สำรอง PNG เฉพาะหากแอนะลิติกส์แสดงทราฟฟิกรุ่นเก่า
ประมวลผลในเครื่อง?
ใช่ — ไฟล์ไม่ออกจากเบราว์เซอร์