ฝังรูปภาพในเว็บด้วย data URI
นักทำเว็บมักเจอปัญหาหน้าเว็บโหลดช้าเพราะต้องดึงรูปไอคอนเล็กๆ หลายไฟล์ วิธีแก้คือเข้ารหัสรูปเล็กๆ เป็น Base64 แล้วฝังใน CSS หรือ HTML ด้วยรูปแบบ data URI ทำให้เบราว์เซอร์ไม่ต้องส่ง request แยก หน้าเว็บเปิดเร็วขึ้นชัดเจน
เทคนิคนี้เหมาะกับไอคอนและโลโก้ขนาดเล็กกว่า 2-4KB ถ้าไฟล์ใหญ่กว่านั้นการฝังจะทำให้ไฟล์ CSS ใหญ่เกินไป ควรเก็บเป็นไฟล์แยกตามปกติ การตัดสินใจว่าไฟล์ไหนควรฝังเป็นทักษะพื้นฐานของ front-end ที่ดี
ส่ง token และข้อมูลผ่าน API
ระบบ API สมัยใหม่ใช้ Base64 เป็นส่วนหนึ่งของ token ยืนยันตัวตน เช่น JWT ที่ประกอบด้วยข้อมูลเข้ารหัส Base64 สามส่วนต่อกัน นักพัฒนาต้องถอดรหัสส่วน payload เพื่อตรวจสอบว่าสิทธิ์ผู้ใช้และเวลาหมดอายุถูกต้องหรือไม่
เวลาทดสอบ API แล้วได้ token กลับมา ให้คัดลอกส่วนกลางของ token มาถอดรหัสด้วยเครื่องมือ Base64 จะเห็นข้อมูลข้างในทันที วิธีนี้ช่วยแยกแยะได้เร็วว่าปัญหาอยู่ที่ token หรืออยู่ที่โค้ด จำไว้ว่าเนื้อใน JWT ที่เข้ารหัส Base64 นี้ใครก็ถอดอ่านได้ ไม่ใช่ข้อมูลลับ อย่าใส่รหัสผ่านหรือข้อมูลอ่อนไหวลงใน token
ไฟล์แนบในอีเมลตามมาตรฐาน MIME
อีเมลถูกออกแบบมาให้ส่งข้อความล้วน การส่งไฟล์แนบจึงต้องแปลงไฟล์เป็นข้อความก่อนด้วย Base64 ตามมาตรฐาน MIME นี่คือเหตุผลที่ไฟล์แนบอีเมลมีขนาดใหญ่กว่าไฟล์ต้นฉบับประมาณหนึ่งในสาม
ความรู้นี้มีประโยชน์เวลาอธิบายให้ผู้ใช้เข้าใจว่าทำไมส่งไฟล์ 10MB ทางอีเมลถึงเกินโควตา หรือเวลาต้องดึงไฟล์แนบจากอีเมลดิบมาตรวจสอบด้วยตัวเอง
ส่งข้อมูลที่มีอักขระพิเศษให้เพื่อนร่วมทีม
เวลาต้องส่งค่าคอนฟิกหรือตัวอย่างข้อมูลที่มีอักขระพิเศษผ่านแชท ข้อความมักเพี้ยนเพราะแพลตฟอร์มตัดหรือแปลงอักขระ การเข้ารหัสเป็น Base64 ก่อนส่งทำให้ข้อมูลถึงปลายทางครบถ้วนไม่ผิดเพี้ยน
อีก กรณีใช้งาน คือการเก็บข้อมูลไบนารีในไฟล์ข้อความ เช่น เก็บลายเซ็นดิจิทัลในไฟล์คอนฟิก ทำให้จัดการด้วยเครื่องมือข้อความทั่วไปได้โดยไม่ต้องแยกไฟล์
เริ่มต้นจาก กรณีใช้งาน ง่ายๆ ก่อน
ถ้าเพิ่งรู้จัก Base64 ให้เริ่มจาก กรณีใช้งาน ที่ง่ายที่สุดคือการเข้ารหัสข้อความส่งให้เพื่อนแล้วให้เพื่อนถอดรหัสกลับ การลองเล่นแบบนี้ทำให้เห็นภาพรวมของกระบวนการทั้งหมดโดยไม่ต้องมีพื้นฐานเทคนิค
จากนั้นค่อยขยับไปงานที่ซับซ้อนขึ้นอย่างการดู payload ของ JWT หรือการทำ data URI การเรียนรู้แบบขั้นบันไดทำให้ Base64 กลายเป็นเครื่องมือประจำตัวได้เร็วกว่าที่คิด
คำถามที่พบบ่อย
งานแบบไหนควรใช้ data URI แทนไฟล์รูปแยก
รูปเล็กกว่า 2-4KB ที่ใช้ซ้ำทั่วเว็บ เช่น ไอคอนและโลโก้ การฝังช่วยลดจำนวน request ทำให้เว็บเร็วขึ้น แต่รูปใหญ่ควรเก็บเป็นไฟล์แยกตามปกติ
ถอดรหัส JWT token ดูข้อมูลข้างในทำอย่างไร
คัดลอกส่วนกลางของ token ที่อยู่ระหว่างจุดสองจุดมาถอดรหัสด้วยเครื่องมือ Base64 จะเห็นข้อมูล payload ทันที แต่ระวังอย่าแชร์ token จริงให้คนอื่น
ทำไมไฟล์แนบอีเมลใหญ่กว่าไฟล์ต้นฉบับ
เพราะไฟล์ถูกแปลงเป็น Base64 ตามมาตรฐาน MIME ซึ่งทำให้ขนาดใหญ่ขึ้นประมาณ 33% เป็นเรื่องปกติของการส่งไฟล์ผ่านอีเมล
ส่งรหัส Base64 ให้เพื่อนต้องระวังอะไร
ระวังแพลตฟอร์มแชทตัดบรรทัดหรือซ่อนข้อความยาว ควรส่งใน code block และบอกผู้รับให้คัดลอกทั้งชุดรวมถึงเครื่องหมาย = ท้ายรหัส