วิธีแปลงรูปภาพเป็น Base64
- ลากรูปภาพมาวางในช่อง คลิกเพื่อเลือกไฟล์ หรือวางจากคลิปบอร์ดด้วย Ctrl+V
- เลือกรูปแบบผลลัพธ์: data URI, Base64 ล้วน, HTML, CSS, Markdown หรือ JSON
- คลิก คัดลอก แล้ววางโค้ดลงใน HTML, CSS, เทมเพลตอีเมล หรือคำขอ API ของคุณ
ควรฝังรูปภาพเป็น Base64 เมื่อใด?
รูปภาพ Base64 แบบอินไลน์ช่วยลดคำขอ HTTP ได้หนึ่งครั้ง จึงเหมาะกับไอคอนขนาดเล็ก ลายเซ็นอีเมล เอกสาร HTML แบบไฟล์เดียว และข้อมูลที่ส่งผ่าน API แต่เนื่องจาก Base64 มีขนาดใหญ่กว่าไฟล์ต้นฉบับประมาณ 33% และแคชแยกต่างหากไม่ได้ ภาพถ่ายและไฟล์ที่ใหญ่กว่าไม่กี่กิโลไบต์จึงควรใช้ไฟล์รูปภาพตามปกติ
คำอธิบายรูปแบบผลลัพธ์
- Data URI –
data:image/png;base64,…สำหรับแอตทริบิวต์srcและ CSS - เฉพาะ Base64 – สตริงล้วนสำหรับ API และฐานข้อมูล
- HTML / CSS / Markdown – โค้ดสำเร็จรูปที่วางใช้งานได้ทันที
- JSON – ชื่อไฟล์ MIME type และข้อมูลรวมอยู่ในออบเจ็กต์เดียว
คำถามที่พบบ่อย
การแปลงเป็น Base64 ทำให้รูปภาพใหญ่ขึ้นไหม?
ใช่ ใหญ่ขึ้นประมาณหนึ่งในสาม ไฟล์ PNG ขนาด 30 KB จะกลายเป็นข้อความ Base64 ราว 40 KB หากขนาดไฟล์เป็นเรื่องสำคัญ ควรบีบอัดหรือย่อขนาดรูปภาพก่อน
แปลงรูปภาพรูปแบบใดได้บ้าง?
ทุกรูปแบบที่เบราว์เซอร์ของคุณเปิดได้ เช่น PNG, JPG/JPEG, GIF, WebP, SVG, BMP, ICO, AVIF และอื่น ๆ ระบบจะเพิ่ม MIME type ที่ถูกต้องลงใน data URI ให้อัตโนมัติ
จะใช้รูปภาพ Base64 ใน CSS ได้อย่างไร?
เลือกรูปแบบ CSS แล้ววางผลลัพธ์ลงในกฎ CSS ของคุณ เช่น .logo { background-image: url("data:image/png;base64,…"); }