Data URI ฝังเนื้อหาของไฟล์ลงใน HTML, CSS หรือ JS โดยตรงในรูปแบบ data:[ประเภท];base64,[ข้อมูล] โดยไม่ต้องส่งคำขอ HTTP แยกต่างหาก ในตลาดที่ผู้ใช้ส่วนใหญ่เข้าเว็บผ่านแพ็กเกจอินเทอร์เน็ตมือถือแบบจำกัดโควต้า — ซึ่งยังพบได้ทั่วไปนอกเขตเมืองใหญ่ในไทย — การลดคำขอ HTTP แต่ละครั้งส่งผลต่อความเร็วในการโหลดและปริมาณข้อมูลที่ใช้จริง
คำขอน้อยลง แต่ HTML หนักขึ้น
บนการเชื่อมต่อ 4G ที่ไม่เสถียร เวลาหน่วง (round-trip) ของคำขอ HTTP เพิ่มเติมมักส่งผลมากกว่าขนาดไฟล์จริง การฝังไอคอนขนาดเล็กเป็น Data URI จึงช่วยให้หน้าเว็บแสดงผลได้เร็วขึ้นในการโหลดครั้งแรก แต่ก็มีขีดจำกัด — หากฝังรูปภาพลักษณะนี้มากเกินไป ไฟล์ HTML เองจะบวมขึ้นจนโหลดช้าลงแทน
ข้อดี
- คำขอ HTTP น้อยลง — มีประโยชน์สำหรับไอคอนขนาดเล็กหรือภาพพื้นหลังบนการเชื่อมต่อที่ช้า
- ไฟล์ "ผูก" อยู่กับเอกสารและไม่พังเมื่อเส้นทาง CDN เปลี่ยน
- เหมาะสำหรับภาพตัวยึดตำแหน่งที่ต้องแสดงทันทีก่อนภาพจริงโหลดเสร็จ
ข้อจำกัด
- Base64 เพิ่มขนาดข้อมูลประมาณหนึ่งในสามเมื่อเทียบกับไฟล์ไบนารี
- Data URI ขนาดใหญ่จะทำให้ไฟล์ HTML/CSS เองบวมขึ้น และไม่สามารถแคชแยกจากหน้าเว็บได้
- สำหรับรูปภาพขนาดใหญ่หรือที่ถูกใช้ซ้ำบ่อย ไฟล์แยกที่แคชได้มักประหยัดโควต้ามากกว่าเมื่อกลับมาเยี่ยมชมซ้ำ
SVG ในรูปแบบข้อความ ไม่ใช่ Base64
แตกต่างจากรูปแบบภาพแบบราสเตอร์ SVG คือข้อความ (XML) จึงไม่จำเป็นต้องเข้ารหัสเป็น Base64 เสมอไป — เพียงแค่ escape อักขระพิเศษด้วย percent-encoding ให้ถูกต้องก็เพียงพอ (data:image/svg+xml,%3Csvg...) วิธีนี้ทำให้ขนาดผลลัพธ์เบาลงเล็กน้อย และยังคงแก้ไขได้ในรูปแบบข้อความโดยตรงในไฟล์ CSS