ไม่มีการอัปโหลด, 100% ในเครื่อง, ไม่มีบัญชี

แปลงรูปภาพ → Base64

เข้ารหัสรูปภาพใดก็ได้เป็น Base64 data URI หรือวาง data URI เพื่อถอดรหัสกลับเป็นรูปภาพ คัดลอกผลลัพธ์หรือรับสไนปเป็ต CSS url() ไม่มีข้อมูลออกจากอุปกรณ์

แปลงรูปภาพเป็น Base64 ทำงานอย่างไร

Image to Base64 อ่านไฟล์ภาพของคุณและเข้ารหัสเป็น Base64 data URI ที่คุณสามารถฝังโดยตรงใน HTML, CSS หรือ JSON โดยไม่ต้องใช้คำขอไฟล์แยกต่างหาก การแปลงใช้ FileReader API ในเบราว์เซอร์ของคุณ ไม่มีไบต์จากภาพของคุณถูกส่งไปยังเซิร์ฟเวอร์ คุณยังสามารถวางสตริง Base64 กลับมาเพื่อถอดรหัสและดูตัวอย่างภาพ ทั้งหมดนี้ทำในเครื่อง

Base64 data URI มีขนาดใหญ่กว่าต้นฉบับ binary ประมาณ 33% เนื่องจากทุกกลุ่มของสามไบต์ขยายเป็นสี่ตัวอักษร ASCII การเพิ่มขนาดนี้เป็นข้อแลกเปลี่ยนที่คาดหวังสำหรับความสะดวกในการฝังภาพลงในเอกสารหรือ stylesheet เครื่องมือแสดงทั้งสตริง Base64 ดิบและแท็ก HTML img ที่พร้อมใช้งานและ snippet CSS background-image สำหรับการคัดลอกและวางลงในโปรเจกต์ของคุณได้อย่างรวดเร็ว

เขียนโดย Bastien Sulyan

วิธีใช้ แปลงรูปภาพเป็น Base64 ทีละขั้นตอน

  1. วางไฟล์ภาพลงบนพื้นที่อัปโหลดหรือคลิกเพื่อเรียกดู รูปแบบที่รับ: JPEG, PNG, WebP, GIF, SVG
  2. Base64 data URI จะปรากฏทันทีในช่องเอาต์พุต
  3. คัดลอกสตริง Base64 ดิบ หรือใช้แท็ก HTML img ที่จัดรูปแบบไว้แล้วหรือ snippet CSS background-image
  4. หากต้องการถอดรหัส ให้วางสตริง Base64 ลงในช่องอินพุตและสลับเป็นโหมดถอดรหัสเพื่อดูตัวอย่างภาพ
  5. คลิกปุ่มคัดลอกข้าง snippet ใด ๆ เพื่อคัดลอกไปยัง clipboard

กรณีการใช้งานที่พบบ่อย

  • นักพัฒนา front-end ฝังไอคอนขนาดเล็กเป็น data URI ในไฟล์ CSS เพื่อลดคำขอ HTTP เพิ่มเติม
  • นักพัฒนาฝัง loading spinner ขนาดเล็กเป็นแอตทริบิวต์ src แบบ Base64 เพื่อให้ภาพ placeholder พร้อมใช้ก่อนที่ JavaScript bundle จะโหลด
  • วิศวกร QA คัดลอก Base64 ของภาพทดสอบเพื่อวางโดยตรงใน JSON payload สำหรับการทดสอบ API
  • ผู้สร้างเทมเพลตอีเมลฝังโลโก้ลายเซ็นเป็น Base64 data URI เนื่องจากไคลเอนต์อีเมลบางตัวบล็อกคำขอรูปภาพภายนอก

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

ทำไมเอาต์พุต Base64 ถึงใหญ่กว่าไฟล์ต้นฉบับประมาณหนึ่งในสาม?

การเข้ารหัส Base64 แสดงทุกสามไบต์ binary เป็นสี่ตัวอักษร ASCII (อัตราส่วน 4/3) ภาพที่มีขนาด 100 KB ใน binary จะกลายเป็นสตริง Base64 ขนาดประมาณ 133 KB สิ่งนี้เป็นส่วนหนึ่งของรูปแบบการเข้ารหัส ไม่ใช่ข้อจำกัดของเครื่องมือ

เนื้อหาภาพถูกส่งไปยังเซิร์ฟเวอร์ระหว่างการเข้ารหัสหรือไม่?

ไม่ FileReader API อ่านไฟล์ binary จากดิสก์ในเครื่องของคุณและส่งผลลัพธ์โดยตรงไปยังฟังก์ชันการเข้ารหัส JavaScript ภายในแท็บเบราว์เซอร์ ข้อมูลภาพไม่ออกจากอุปกรณ์ของคุณ

ฉันสามารถใช้เอาต์พุต data URI ในบริบท HTML หรือ CSS ใดก็ได้หรือไม่?

ได้ data URI ที่เริ่มต้นด้วย data:image/jpeg;base64, ตามด้วยสตริงที่เข้ารหัสสามารถใช้เป็นแอตทริบิวต์ src ของแท็ก img หรือค่า url() ใน CSS background-image property เบราว์เซอร์ทุกตัวรองรับ data URI data URI ขนาดใหญ่มากอาจทำให้การแสดงผลหน้าช้าลง ดังนั้นการฝังมักสงวนไว้สำหรับภาพขนาดเล็กที่มีขนาดไม่กี่กิโลไบต์

เครื่องมือรองรับ GIF เคลื่อนไหวหรือไม่?

เครื่องมือเข้ารหัสเนื้อหา binary ทั้งหมดของไฟล์ที่คุณให้ รวมถึง GIF เคลื่อนไหว data URI ที่ได้ เมื่อใช้เป็น src ของแท็ก img จะเล่นแอนิเมชันในเบราว์เซอร์ที่รองรับแอนิเมชัน GIF

ฉันจะถอดรหัสสตริง Base64 กลับเป็นภาพได้อย่างไร?

สลับเครื่องมือเป็นโหมดถอดรหัส วางสตริง Base64 ของคุณ (มีหรือไม่มีคำนำหน้า data:) และเครื่องมือจะถอดรหัสและเสนอภาพ binary เป็นการดาวน์โหลดรวมทั้งแสดงตัวอย่าง

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

เก็บทุกอย่างไว้ในเครื่อง, สำรวจเครื่องมือเสริม

เครื่องมือรูปภาพทั้งหมด