การแปลงรูปภาพเป็นรหัส Base64 สำหรับใช้ใน HTML และ CSS ทำได้ทันทีด้วยเครื่องมือออนไลน์ฟรีนี้ ไม่มีการส่งไฟล์ไปยังเซิร์ฟเวอร์
รูปภาพ Base64 คืออะไร?
Base64 image คือการแปลงไฟล์รูปภาพให้เป็นสตริงข้อความยาวๆ ที่สามารถฝังลงใน HTML หรือ CSS โดยตรงได้ ใช้รูปแบบ data URI เช่น data:image/png;base64,iVBORw... ทำให้ไม่ต้องมีไฟล์รูปภาพแยกต่างหาก
วิธีแปลงรูปภาพเป็น Base64
- คลิกเลือกหรือลากไฟล์รูปภาพมาวาง
- รหัส Base64 จะสร้างขึ้นทันที
- คัดลอกเป็นข้อความหรือในรูปแบบ CSS background-image
ทุกอย่างทำงานในเบราว์เซอร์ รูปภาพไม่ถูกส่งไปที่ไหน
กรณีการใช้งาน
- อีเมล HTML - ฝังรูปในอีเมลโดยไม่ต้องแนบไฟล์
- CSS Sprites - ฝัง icon เล็กๆ ใน stylesheet
- Single Page App - ลดจำนวน HTTP request
- Offline - ทำให้แอปทำงานได้โดยไม่ต้องโหลดรูป
- การทดสอบ - ใช้รูปจาก data URI แทน URL
คำถามที่พบบ่อย
ไฟล์รูปภาพจะถูกอัปโหลดหรือไม่? ไม่ ทุกอย่างประมวลผลในเบราว์เซอร์ รูปภาพของคุณจะไม่ออกจากเครื่อง
รองรับรูปแบบอะไรบ้าง? รองรับ PNG, JPG, GIF, WebP, SVG และรูปแบบอื่นๆ ที่เบราว์เซอร์รองรับ
Base64 ทำให้ขนาดไฟล์ใหญ่ขึ้นหรือไม่? ใช่ Base64 ทำให้ขนาดใหญ่ขึ้นประมาณ 33% ควรใช้สำหรับรูปขนาดเล็กเท่านั้น
data URI กับ URL ปกติต่างกันอย่างไร? URL ปกติชี้ไปยังไฟล์ภายนอก ส่วน data URI มีข้อมูลรูปภาพฝังอยู่ในตัว URL เอง