ตัวแปลงรูปภาพเป็น Base64 - เครื่องมือออนไลน์ฟรี

วิธีแปลงรูปภาพเป็น Base64

1. 1

   อัปโหลดรูปภาพ

   ลากและวางไฟล์ลงในพื้นที่อัปโหลด หรือคลิกเพื่อเรียกดู รองรับ PNG, JPG, GIF, WebP, SVG และ BMP

2. 2

   รับผลลัพธ์ที่เข้ารหัส

   เครื่องมืออ่านไฟล์ในเครื่องและสร้างสตริง Base64 ทันที โดยไม่ต้องส่งข้อมูลไปยังเซิร์ฟเวอร์

3. 3

   เลือก Base64 ดิบหรือ Data URI

   คัดลอกข้อความ Base64 ดิบสำหรับ JSON payload หรือคัดลอกสตริง Data URI ทั้งหมดสำหรับใช้ใน HTML <img> และ CSS background-image

4. 4

   ฝังลงในโค้ด

   วาง Data URI โดยตรงใน HTML หรือ CSS เพื่อฝังรูปภาพแบบ inline และลดการร้องขอ HTTP

อ้างอิง

• RFC 2397 — รูปแบบ data URL

  ข้อกำหนด IETF ที่กำหนดรูปแบบ data: URL สำหรับการฝังสื่อที่เข้ารหัส Base64 แบบ inline

• MDN — Data URLs

  คู่มือปฏิบัติเกี่ยวกับไวยากรณ์ data URL, การเข้ารหัส Base64 และวิธีฝังรูปภาพใน HTML และ CSS

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

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

ทำไมต้องแปลงรูปภาพเป็น Base64?

การแปลงเป็น Base64 ช่วยให้คุณฝังรูปภาพโดยตรงใน HTML หรือ CSS เป็นสตริงข้อความ ลดการร้องขอ HTTP แยกต่างหากสำหรับไฟล์ภายนอก เหมาะสำหรับไอคอน โลโก้ และรูปภาพขนาดเล็กเป็นพิเศษ

มีขีดจำกัดขนาดไฟล์หรือไม่?

เครื่องมือไม่มีขีดจำกัดที่แน่นอน ขีดจำกัดจริงขึ้นอยู่กับหน่วยความจำของเบราว์เซอร์ ควรทราบว่าผลลัพธ์ Base64 มีขนาดใหญ่กว่าไฟล์ไบนารีต้นฉบับประมาณ 33% จึงแนะนำให้ใช้ Base64 เฉพาะกับรูปภาพขนาดเล็กเท่านั้น

การแปลงเป็น Base64 ทำให้คุณภาพลดลงหรือไม่?

ไม่ การเข้ารหัส Base64 ไม่มีการสูญเสียข้อมูล รูปภาพที่ถอดรหัสแล้วจะเหมือนกับไฟล์ต้นฉบับทุกไบต์

ความแตกต่างระหว่าง Base64 ดิบและ Data URI คืออะไร?

Base64 ดิบคือสตริงอักขระที่เข้ารหัสเท่านั้น ส่วน Data URI เพิ่ม prefix เช่น data:image/png;base64, ซึ่งบอกประเภท MIME ให้กับเบราว์เซอร์ ทำให้สามารถวางได้โดยตรงใน src ของ <img> หรือ CSS background-image

รูปภาพของฉันถูกอัปโหลดไปยังเซิร์ฟเวอร์หรือไม่?

ไม่ การเข้ารหัสทั้งหมดเกิดขึ้นในเบราว์เซอร์โดยใช้ FileReader API ไฟล์ของคุณไม่เคยออกจากอุปกรณ์

จะใช้รูปภาพ Base64 ใน CSS ได้อย่างไร?

คัดลอก Data URI และใช้เป็นค่าของ background-image: url('data:image/png;base64,...'); ในไฟล์ CSS ของคุณ