ภาษาไทย

ตัวสร้าง Data URI

แปลงข้อความหรือไฟล์เป็น URL แบบ data: สำหรับ HTML, CSS หรือ JSON โดยใช้ Base64 หรือการเข้ารหัสแบบเปอร์เซ็นต์ วาง data URI ที่มีอยู่เพื่อตรวจดูชนิด MIME ชุดอักขระ และขนาด ดูตัวอย่าง และดาวน์โหลดเนื้อหา

ทำงานภายในเบราว์เซอร์ของคุณทั้งหมด ไม่มีการอัปโหลดข้อมูลใด ๆ

วิธีใช้งาน

  1. พิมพ์ข้อความหรือเลือกไฟล์ที่ต้องการฝัง
  2. ตรวจสอบหรือป้อนชนิด MIME เช่น image/png หรือ image/svg+xml แล้วเลือก “Base64” หรือ “การเข้ารหัสแบบเปอร์เซ็นต์”
  3. คัดลอก data URI ที่สร้างขึ้นไปใช้ใน HTML, CSS หรือ JSON
  4. หากต้องการตรวจดู data URI ที่มีอยู่ ให้วางลงในโหมด “แยกวิเคราะห์” เพื่อดูชนิด MIME ชุดอักขระ ขนาด และภาพตัวอย่าง รวมถึงดาวน์โหลดไฟล์ที่ฝังอยู่

ไวยากรณ์ของ data URI

data URI ซึ่งกำหนดไว้ใน RFC 2397 บรรจุไฟล์ขนาดเล็กไว้ภายในตัว URL เอง:

data:[<mediatype>][;base64],<data>

data:text/plain;charset=UTF-8,Hello%20world
data:image/png;base64,iVBORw0KGgo...

ชนิดสื่อ (media type) บอกเบราว์เซอร์ว่าควรตีความข้อมูลอย่างไร หากไม่ได้ระบุไว้ จะถือว่าเป็น text/plain;charset=US-ASCII แฟล็ก ;base64 หมายความว่าส่วนที่อยู่หลังจุลภาคเป็น Base64 หากไม่มีแฟล็กนี้ ข้อมูลจะเป็นข้อความธรรมดาที่อักขระพิเศษถูกเข้ารหัสแบบเปอร์เซ็นต์

Base64 หรือการเข้ารหัสแบบเปอร์เซ็นต์

Base64 เป็นตัวเลือกที่เหมาะสำหรับไฟล์ไบนารี เช่น PNG, JPEG, WebP, ฟอนต์ และ PDF โดยจะเพิ่มขนาดประมาณ 33% เสมอ สำหรับรูปแบบข้อความ การเข้ารหัสแบบเปอร์เซ็นต์มักให้ผลลัพธ์ที่เล็กกว่า เพราะอักขระส่วนใหญ่คงเดิม มีเพียงไม่กี่ตัวที่ต้อง escape เช่น <, >, #, % และเครื่องหมายอัญประกาศคู่ จึงเหมาะกับไอคอน SVG และผลลัพธ์ที่อ่านได้ยังบีบอัดด้วย gzip หรือ Brotli ได้ดีกว่าด้วย อย่างไรก็ตาม ข้อความที่ไม่ใช่ ASCII แต่ละไบต์จะกลายเป็นอักขระสามตัว สำหรับข้อความภาษาไทย ภาษาจีน หรืออักษรซีริลลิก Base64 จึงมักสั้นกว่า หากไม่แน่ใจ ให้ลองทั้งสองตัวเลือกแล้วเลือกผลลัพธ์ที่สั้นกว่า

/* SVG ที่เข้ารหัสแบบเปอร์เซ็นต์ใน CSS: ใช้อัญประกาศเดี่ยวข้างใน และเขียน # เป็น %23 */
.dot { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='4' fill='%23f60'/%3E%3C/svg%3E"); }

เมื่อใดที่การฝังข้อมูลแบบอินไลน์คุ้มค่า

data URI ช่วยประหยัดคำขอ HTTP ได้หนึ่งครั้ง แต่ข้อมูลจะกลายเป็นส่วนหนึ่งของเอกสารที่บรรจุข้อมูลนั้นไว้:

  • ไม่มีการแคชแยก รูปภาพที่ฝังไว้ใน HTML จะถูกดาวน์โหลดใหม่กับทุกหน้า ส่วนรูปภาพที่ฝังไว้ในสไตล์ชีตจะถูกแคชไปพร้อมกับไฟล์นั้น และเมื่อเปลี่ยนรูปภาพ แคชของสไตล์ชีตทั้งไฟล์ก็จะใช้ไม่ได้
  • การแสดงผลครั้งแรกช้าลง data URI ขนาดใหญ่ใน CSS ทำให้การแสดงผลล่าช้า เพราะเบราว์เซอร์ต้องดาวน์โหลดและแยกวิเคราะห์สไตล์ชีตทั้งหมดก่อน
  • ขนาดที่เพิ่มขึ้น Base64 เพิ่มขนาดอีกหนึ่งในสาม และการบีบอัด HTML หรือ CSS ชดเชยคืนได้เพียงบางส่วน

เมื่อใช้ HTTP/2 และ HTTP/3 คำขอเพิ่มเติมมีต้นทุนต่ำ จึงควรฝังเฉพาะไฟล์ขนาดเล็กเพียงไม่กี่กิโลไบต์ เช่น ไอคอน ภาพตัวยึดตำแหน่งขนาดเล็ก หรือภาพพื้นหลังที่สำคัญต่อการแสดงผล และให้บริการไฟล์อื่นทั้งหมดเป็นไฟล์ปกติ เว็บไซต์ที่ใช้ Content Security Policy ต้องอนุญาต data: ใน img-src หรือ font-src เพื่อให้รูปภาพและฟอนต์ที่ฝังไว้โหลดได้

คำถามที่พบบ่อย

data URI มีขีดจำกัดขนาดหรือไม่

RFC 2397 ไม่ได้กำหนดขีดจำกัดไว้ และเบราว์เซอร์สมัยใหม่รองรับ data URI ขนาดหลายเมกะไบต์ในรูปภาพและสไตล์ชีต แต่ data URI ขนาดใหญ่ก็ยังไม่ใช่ทางเลือกที่ดี เพราะทำให้หน้าเว็บมีขนาดใหญ่ขึ้น แคชแยกไม่ได้ และใช้เวลาแยกวิเคราะห์นานขึ้น

ทำไมคลิกลิงก์ที่ชี้ไปยัง data URI แล้วจึงเปิดไม่ได้

เบราว์เซอร์ส่วนใหญ่ไม่อนุญาตให้หน้าเว็บนำทางหน้าต่างหลักไปยัง URL แบบ data: เพื่อป้องกันฟิชชิง ให้ใช้ data URI ภายในรูปภาพ CSS หรือลิงก์ดาวน์โหลด หรือวาง URI ลงในโหมด “แยกวิเคราะห์” ของหน้านี้เพื่อดูตัวอย่างและดาวน์โหลดเนื้อหา

จะใช้ data URI ใน HTML และ CSS ได้อย่างไร
ใส่ไว้ในตำแหน่งใดก็ได้ที่ต้องการ URL เช่น <img src="data:image/png;base64,..."> ใน HTML หรือ background-image: url("data:image/svg+xml,...") ใน CSS และควรครอบค่าใน CSS ด้วยเครื่องหมายอัญประกาศ โดยเฉพาะ SVG ที่เข้ารหัสแบบเปอร์เซ็นต์
จำเป็นต้องระบุชุดอักขระ (charset) หรือไม่
สำหรับชนิดข้อความ เช่น text/plain หรือ text/html ที่มีอักขระนอกเหนือจาก ASCII จำเป็นต้องระบุ โดยเพิ่ม ;charset=UTF-8 ต่อท้ายชนิดสื่อ มิฉะนั้นค่าเริ่มต้น US-ASCII อาจทำให้อักขระเหล่านั้นแสดงผลผิดเพี้ยน ส่วนชนิดไบนารี เช่น image/png ไม่ต้องระบุชุดอักขระ
จะแปลงรูปภาพเป็น data URI ได้อย่างไร
เลือกไฟล์รูปภาพในหน้านี้ หรือใช้เครื่องมือ รูปภาพเป็น Base64 ซึ่งสามารถปรับขนาดหรือแปลงรูปแบบรูปภาพก่อน และให้โค้ด HTML, CSS และ Markdown ที่พร้อมใช้งาน

เครื่องมือที่เกี่ยวข้อง

รูปภาพเป็น Base64เข้ารหัสรูปภาพใดก็ได้เป็น data URI, แท็ก img, CSS หรือ Markdown ไฟล์เป็น Base64เข้ารหัสไฟล์ใดก็ได้ขนาดไม่เกิน 100 MB เป็น Base64 ล้วนหรือ data URI SVG เป็น Base64กราฟิกเวกเตอร์ SVG เป็น Base64 แบบ data:image/svg+xml Base64 เป็นไฟล์ถอดรหัส Base64 เป็นไฟล์ พร้อมตรวจหาชนิดไฟล์และแสดงตัวอย่าง