Data URI Generator: แปลงไฟล์เป็น base64 data URI ฝังใน HTML/CSS ได้ทันที

เคยไหมที่ต้องการฝังรูปภาพเล็ก ๆ ไอคอน หรือฟอนต์ลงไปใน HTML หรือ CSS ตรง ๆ โดยไม่ต้องแยกเป็นไฟล์ให้วุ่นวาย? หรือเคยเจอ data URI ยาวเหยียดในโค้ดของคนอื่นแล้วอยากรู้ว่าข้างในมันคืออะไรกันแน่? data URI คือคำตอบของทั้งสองสถานการณ์นี้ — มันคือวิธีเข้ารหัสไฟล์ทั้งไฟล์ให้อยู่ในรูปข้อความที่สามารถแปะลงในโค้ดได้โดยตรง และ Data URI Generator คือเครื่องมือฟรีที่ช่วยให้การแปลงนี้เป็นเรื่องง่ายในไม่กี่วินาที

data URI คือสตริงที่ขึ้นต้นด้วย data: ตามด้วย MIME type และเนื้อหาไฟล์ที่ถูกเข้ารหัสแบบ base64 ทำให้ browser สามารถ render ไฟล์นั้นได้ทันทีโดยไม่ต้องส่ง HTTP request แยกอีกต่างหาก เทคนิคนี้ถูกกำหนดไว้ในมาตรฐาน RFC 2397 และถูกใช้อย่างแพร่หลายในงาน web development ตั้งแต่การฝังไอคอนใน CSS ไปจนถึงการสร้างไฟล์ HTML เดียวที่พกพาทุกอย่างไปด้วยตัวเอง

เครื่องมือนี้ทำงานแบบ client-side 100% ซึ่งหมายความว่าไฟล์ของคุณไม่ถูกอัปโหลดไปที่เซิร์ฟเวอร์ใด ๆ ทั้งสิ้น รองรับทั้งการ encode (แปลงไฟล์เป็น data URI) และ decode (แปลง data URI กลับเป็นข้อความหรือไฟล์) พร้อมระบบตรวจจับ MIME type อัตโนมัติจากนามสกุลไฟล์ ใช้งานฟรี และไม่ต้องสมัครสมาชิก

ทำไมต้องใช้ Data URI Generator?

• รองรับไฟล์เกือบทุกประเภทที่ใช้บนเว็บ — ไม่ว่าจะเป็นรูปภาพ (PNG, JPEG, GIF, WebP, SVG, AVIF), PDF, ฟอนต์ (WOFF, WOFF2, TTF, OTF), ไฟล์เสียง MP3, วิดีโอ MP4 หรือไฟล์ข้อความอย่าง HTML, CSS, JavaScript และ JSON ก็แปลงได้ทั้งหมด
• ตรวจจับ MIME type อัตโนมัติ — เครื่องมืออ่านนามสกุลไฟล์แล้วเลือก MIME type ที่ถูกต้องให้ทันที เช่น .png ได้ image/png, .woff2 ได้ font/woff2 โดยไม่ต้องจำเอง และถ้าต้องการ override ก็กำหนดค่าเองได้
• ทำงานแบบ client-side 100% — ทุกอย่างเกิดขึ้นใน browser ของคุณ ไฟล์ไม่ถูกอัปโหลดไปที่ไหน เหมาะมากกับไฟล์ภายในหรือเอกสารที่ไม่ต้องการให้หลุดออกนอกเครื่อง
• Encode และ Decode ในตัวเดียว — ไม่ต้องสลับใช้หลายเครื่องมือ อยากแปลงไฟล์เป็น data URI ก็เลือกโหมด encode อยากแกะ data URI ที่เจอในโค้ดก็สลับไปโหมด decode ได้เลย
• Copy และ Download ได้ในคลิกเดียว — ผลลัพธ์ที่ได้กด copy ไปวางในโค้ดได้ทันที หรือจะ download กลับเป็นไฟล์ก็ทำได้เช่นกัน
• ฟรี ไม่ต้องสมัครสมาชิก — เปิดหน้าเว็บแล้วใช้งานได้เลย ไม่มี paywall ไม่มีขั้นตอนยืนยันตัวตนให้เสียเวลา

คุณสมบัติเด่น

• ระบบ MIME type sniffing ทำงานแบบ offline ทั้งหมดโดยดูจากนามสกุลไฟล์ ทำให้เลือก MIME type ได้ถูกต้องโดยไม่ต้องพึ่งเครือข่าย และครอบคลุมไฟล์ที่นักพัฒนาใช้บ่อยที่สุด ตั้งแต่ image/svg+xml สำหรับไอคอน ไปจนถึง font/woff2 สำหรับ web fonts
• โหมด decode ออกแบบมาเพื่อ reverse engineering โดยเฉพาะ — เมื่อคุณวาง data URI ลงไป เครื่องมือจะแยก MIME type ออกมาแสดงเป็น chip ให้เห็นทันที พร้อมคืนเนื้อหาต้นฉบับ ไม่ว่าจะเป็นข้อความที่อ่านได้หรือไฟล์ที่ดาวน์โหลดกลับคืนมาได้
• การเข้ารหัสข้อความรองรับ charset detection อัตโนมัติ ทำให้ data URI ที่ได้ถูกต้องตามมาตรฐานและแสดงผลเนื้อหาได้ตรงตามภาษาต้นฉบับ

วิธีใช้งาน

1. เปิดหน้า Data URI Generator แล้วเลือกโหมดที่ต้องการ — Encode สำหรับแปลงไฟล์หรือข้อความเป็น data URI หรือ Decode สำหรับแกะ data URI กลับเป็นเนื้อหาเดิม
2. ลากไฟล์มาวางในพื้นที่ drag-and-drop หรือถ้าเป็นข้อความก็พิมพ์หรือวางลงในช่อง input ได้โดยตรง
3. ตรวจสอบ MIME type ที่เครื่องมือตรวจจับให้ (แสดงเป็น chip) หากไม่ถูกต้องสามารถ override เป็นค่าที่ต้องการได้
4. กดปุ่มแปลง เครื่องมือจะสร้าง data URI ให้ทันทีพร้อมแสดงขนาดของผลลัพธ์
5. กดปุ่ม Copy เพื่อนำ data URI ไปวางใน HTML/CSS หรือกด Download เพื่อบันทึกเป็นไฟล์ (ในโหมด decode จะได้ไฟล์ต้นฉบับกลับคืนมา)

เข้าใจ Data URI ให้ลึกกว่าเดิม

โครงสร้างของ data URI ตามมาตรฐาน RFC 2397 มีรูปแบบดังนี้:

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

แต่ละส่วนมีความหมายคือ:

• data: — scheme ที่บอก browser ว่านี่คือข้อมูลแบบ inline ไม่ใช่ URL ภายนอก
• <mediatype> — MIME type ของเนื้อหา เช่น image/png, application/pdf, font/woff2 (ไม่บังคับ แต่ควรมีเสมอ)
• ;base64 — flag บอกว่า <data> ถูกเข้ารหัสแบบ base64 ถ้าไม่มี flag นี้ browser จะตีความข้อมูลเป็น URL-encoded text แทน
• <data> — เนื้อหาไฟล์ที่เข้ารหัสแล้ว

ตัวอย่าง data URI ของรูปภาพ PNG ขนาดเล็กจะหน้าตาแบบนี้: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...

สิ่งที่ต้องรู้ก่อนใช้ data URI ใน production:

base64 ทำให้ข้อมูลใหญ่ขึ้นประมาณ 33% — การเข้ารหัส base64 แปลงข้อมูลไบนารีทุก 3 byte ให้กลายเป็นตัวอักษร ASCII 4 ตัว ดังนั้นไฟล์ 100 KB จะกลายเป็นข้อความประมาณ 133 KB เสมอ นี่คือต้นทุนที่ต้องแลกมากับความสะดวก

inline แล้ว cache แยกไม่ได้ — ไฟล์ที่แยกเป็น URL ปกติ browser สามารถ cache แยกต่างหากได้ แต่ถ้าฝังเป็น data URI เนื้อหาจะติดไปกับ HTML/CSS ทุกครั้งที่โหลด ถ้า data URI อยู่ในไฟล์ CSS ที่ cache ได้ก็ยังพอไหว แต่ถ้าฝังใน HTML ที่ generate ใหม่ทุก request ก็เท่ากับส่งข้อมูลซ้ำทุกครั้ง

HTTP/2 ทำให้ประโยชน์เรื่องการลด request ลดลง — เหตุผลคลาสสิกที่ใช้ data URI คือการลดจำนวน HTTP request แต่ในยุค HTTP/2 ที่รองรับ multiplexing การส่งไฟล์เล็ก ๆ หลายไฟล์พร้อมกันผ่าน connection เดียวแทบไม่มี overhead แล้ว ประโยชน์ข้อนี้จึงไม่แรงเท่าสมัยก่อน

ใช้กับ CSS background-image ได้ดีมาก — use case ที่ยังคุ้มค่าคือการฝังไอคอนเล็ก ๆ ใน CSS เพราะไฟล์ CSS มักถูก cache อยู่แล้ว และไอคอนขนาดไม่เกิน 1–2 KB แทบไม่กระทบขนาดไฟล์รวม

.icon-check {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...');
}

HTML email มีข้อจำกัด — email client หลายตัวไม่รองรับ data URI หรือจำกัดขนาดข้อความ เช่น Gmail จะตัด (clip) อีเมลที่มีขนาดใหญ่กว่าประมาณ 102 KB และบาง client ถือว่า data URI เป็นสิ่งต้องสงสัย ถ้าจะฝังรูปใน email ควรทดสอบกับ client เป้าหมายก่อนเสมอ

Use cases จริงในงานพัฒนา

ฝังไอคอนและโลโก้ใน CSS

ไอคอน SVG ขนาดเล็กคือคู่หูที่ดีที่สุดของ data URI เพราะไม่ต้องแยกไฟล์ ไม่ต้องพึ่ง sprite และ CSS ทั้งก้อนถูก cache ได้:

.logo {
  width: 32px;
  height: 32px;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmci...');
  background-repeat: no-repeat;
}

สร้างไฟล์ HTML เดียวแบบ self-contained สำหรับ demo หรือ email signature

เวลาต้องส่ง demo ให้ลูกค้าหรือทำ email signature ที่พกพาทุกอย่างไปด้วยตัวเอง การฝังรูปเป็น data URI ทำให้ไฟล์ HTML เดียวเปิดได้ทุกที่โดยไม่ต้องมีโฟลเดอร์ asset ประกอบ:

<!DOCTYPE html>
<html lang="th">
  <body>
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." alt="โลโก้บริษัท" width="120" />
    <p>สวัสดีครับ นี่คือ demo แบบไฟล์เดียวที่เปิดได้ทุกที่</p>
  </body>
</html>

ฝัง custom web fonts สำหรับ prototype

ช่วงทำ prototype ที่ยังไม่มี CDN หรือ hosting สำหรับฟอนต์ สามารถฝัง WOFF2 เป็น data URI ใน @font-face เพื่อทดสอบ typography ได้ทันที:

@font-face {
  font-family: 'MyCustomFont';
  src: url('data:font/woff2;base64,d09GMgABAAAAAA...') format('woff2');
  font-weight: 400;
  font-style: normal;
}

ข้อควรระวังคือฟอนต์มักมีขนาดหลายสิบ KB เมื่อ encode แล้วจะใหญ่ขึ้นอีกประมาณ 33% จึงเหมาะกับ prototype เท่านั้น สำหรับ production ควรใช้ไฟล์ฟอนต์แยกเพื่อให้ browser cache ได้

Decode data URI ที่เจอในโค้ด

หลายครั้งที่เราเปิดเจอ data URI ยาวเหยียดในโค้ดของผู้อื่นหรือใน email แล้วอยากรู้ว่ามันคืออะไร แค่สลับไปโหมด decode แล้ววางสตริงลงไป เครื่องมือจะแสดง MIME type เป็น chip ให้เห็นทันทีว่าเป็นรูปประเภทไหนหรือไฟล์อะไร พร้อมให้ดาวน์โหลดเนื้อหาต้นฉบับกลับคืนมาได้

Best Practices

• ใช้กับไฟล์เล็ก ๆ เท่านั้น — กฎทั่วไปคือไม่เกิน 1–2 KB สำหรับไอคอนหรือกราฟิกตกแต่ง ยิ่งไฟล์ใหญ่ยิ่งกระทบขนาดหน้าเว็บแบบคูณประมาณ 1.33
• อย่า inline ไฟล์ใหญ่ที่ใช้ซ้ำหลายหน้า — ถ้ารูปเดียวกันปรากฏในหลายหน้า การแยกเป็นไฟล์เดี่ยวให้ browser cache จะประหยัด bandwidth กว่ามาก
• ตรวจสอบ MIME type เสมอ — MIME type ผิดอาจทำให้ browser ไม่ render หรือตีความไฟล์ผิดพลาด โดยเฉพาะ SVG ที่ควรเป็น image/svg+xml เท่านั้น
• ระวังเรื่อง caching — data URI ที่ฝังใน HTML จะถูกส่งซ้ำทุก request ควรฝังใน CSS หรือไฟล์ที่ถูก cache แทนเมื่อเป็นไปได้
• ทดสอบกับ email client ก่อนใช้จริง — ถ้าใช้ data URI ใน HTML email ให้ทดสอบกับ client หลัก ๆ เช่น Gmail และ Outlook ก่อน เพราะหลายตัวไม่รองรับหรือจำกัดขนาด
• พิจารณา SVG แบบ URL-encoded แทน base64 — สำหรับ SVG ล้วน ๆ การ encode แบบ URL-encoded text มักให้ขนาดเล็กกว่า base64 แต่ base64 ยังเป็นตัวเลือกที่ปลอดภัยและเข้ากันได้กว้างที่สุด

เริ่มใช้งาน Data URI Generator ได้เลย

ไม่ว่าคุณจะต้องการฝังไอคอนใน CSS สร้างไฟล์ demo แบบ self-contained หรือแกะ data URI ที่เจอในโค้ด Data URI Generator พร้อมช่วยคุณได้ทันที — ฟรี ไม่ต้องสมัครสมาชิก ทำงานแบบ client-side 100% ไฟล์ของคุณไม่ออกจากเครื่องเด็ดขาด ลองลากไฟล์มาวางแล้วดูผลลัพธ์ได้ในไม่กี่วินาที

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

• Base64 Encoder/Decoder
• HTML Encoder
• URL Encoder

ขอให้สนุกกับการ embed ไฟล์นะครับ!