ตัวแปลง WebP เป็น Base64

WebP คืออะไร

WebP เป็นรูปแบบรูปภาพที่ Google เปิดตัวในปี 2010 รองรับการบีบอัดแบบสูญเสียข้อมูลที่อิงกับตัวแปลงสัญญาณวิดีโอ VP8 โหมดไม่สูญเสียข้อมูลที่แยกต่างหาก ช่องอัลฟา และภาพเคลื่อนไหว ทั้งหมดนี้อยู่ในรูปแบบเดียว ชนิด MIME คือ image/webp และเนื่องจากไฟล์เป็นคอนเทนเนอร์ RIFF เอาต์พุต Base64 จึงขึ้นต้นด้วย UklGR Google รายงานว่าไฟล์ WebP แบบไม่สูญเสียข้อมูลเล็กกว่า PNG ประมาณ 26% และไฟล์แบบสูญเสียข้อมูลเล็กกว่า JPEG 25 ถึง 34% ที่คุณภาพใกล้เคียงกัน

ทำไม WebP จึงเหมาะกับ data URI

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

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

การรองรับในเบราว์เซอร์และโปรแกรมอีเมล

เบราว์เซอร์หลักทุกตัวในปัจจุบันแสดง WebP ได้ ได้แก่ Chrome, Edge, Firefox, Opera และ Safari 14 ขึ้นไป มีเพียงเบราว์เซอร์รุ่นเก่ามาก เช่น Internet Explorer ที่ไม่รองรับ แต่สำหรับอีเมลนั้นต่างออกไป โปรแกรมอีเมลบนเดสก์ท็อปหลายตัว รวมถึง Outlook for Windows ไม่แสดง WebP จึงควรใช้ PNG หรือ JPEG ในเทมเพลตอีเมล

สร้าง data URI ของ WebP ด้วย JavaScript

// อ่านไฟล์ที่ผู้ใช้เลือก
const reader = new FileReader();
reader.onload = () => console.log(reader.result); // "data:image/webp;base64,UklGR..."
reader.readAsDataURL(file);

// เข้ารหัส canvas ใหม่เป็น WebP ที่คุณภาพ 80%
const uri = canvas.toDataURL('image/webp', 0.8);

หากเบราว์เซอร์เข้ารหัส WebP ไม่ได้ toDataURL จะเปลี่ยนไปใช้ PNG แทนโดยไม่แจ้งเตือน จึงควรตรวจสอบว่าผลลัพธ์ขึ้นต้นด้วย data:image/webp