แปลงรูปภาพเป็น Base64

ทำอะไรได้

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

วิธีใช้งาน

1. ลากรูปภาพมาวางที่พื้นที่วางไฟล์ กด เลือกรูปภาพ หรือกด ตัวอย่าง เพื่อโหลดโลโก้ SVG
2. พรีวิวแสดงรูปพร้อมชนิด ขนาดไฟล์ ขนาด Base64 และขนาดภาพ
3. เลือกรูปแบบ เอาต์พุต:
   • Data URI: data:image/png;base64,… สำหรับ attribute src และ JSON
   • Base64 อย่างเดียว: สตริงเปล่า เลือกตัดบรรทัดที่ 76 ตัวอักษรได้ สำหรับการใช้แบบ MIME และ PEM
   • CSS background: declaration background-image: url("…"); แบบสมบูรณ์
   • HTML <img>: แท็กรูปภาพที่ใช้ data URI เป็น src
   • Markdown: ![image](data:…)
4. คัดลอกผลลัพธ์ หากต้องการถอดรหัส ให้วาง Base64 หรือ data URI ลงในช่องอินพุตแล้วกด ดาวน์โหลดรูปภาพ

ตัวอย่าง

PNG ขนาด 2×1 พิกเซลจะกลายเป็น:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAIAAAB7QOjdAAAADUlEQVR4nGP4zwAE/wEHAAH/4iOeWQAAAABJRU5ErkJggg==

ใช้ใน CSS:

.dot { background-image: url("data:image/png;base64,iVBORw0KGgo…"); }

เมื่อไรควรฝังรูปภาพ

การฝังรูปช่วยได้สำหรับรูปเล็ก ๆ ที่ใช้บ่อย เช่น ไอคอน พื้นหลังขนาดจิ๋ว ไอคอนหมุนขณะโหลด และลายเซ็นอีเมล แต่ไม่เหมาะกับรูปถ่ายและกราฟิกขนาดใหญ่: Base64 เพิ่มขนาดประมาณหนึ่งในสาม รูปแคชแยกจากหน้าเว็บหรือสไตล์ชีตไม่ได้ และทำให้ส่วนที่เหลือของไฟล์ parse ช้าลง หลักง่าย ๆ คือรูปที่ฝังไม่ควรเกินไม่กี่กิโลไบต์ สำหรับ SVG data URI แบบ percent-encoded (data:image/svg+xml,…) มักเล็กกว่า Base64 และเครื่องมือนี้รับได้ทั้งสองแบบ