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

ตัวแปลงรูปภาพเป็น Base64 เป็นเครื่องมือออนไลน์ฟรีที่ช่วยแปลงรูปภาพใดๆ ให้เป็นสตริงที่เข้ารหัสแบบ Base64 การเข้ารหัสแบบ Base64 จะเปลี่ยนข้อมูลรูปภาพฐานสองให้เป็นข้อความ ASCII ธรรมดา ซึ่งช่วยให้คุณสามารถฝังรูปภาพลงใน HTML, CSS, JavaScript, JSON, XML และอื่นๆ ได้โดยตรง โดยไม่จำเป็นต้องใช้ไฟล์รูปภาพแยกต่างหาก ทุกอย่างเกิดขึ้นในเบราว์เซอร์ของคุณ: รูปภาพของคุณจะไม่ถูกอัปโหลดไปยังเซิร์ฟเวอร์ใดๆ

การเข้ารหัสรูปภาพ Base64 คืออะไร?

Base64 เป็นรูปแบบการเข้ารหัสจากฐานสองเป็นข้อความที่แสดงข้อมูลฐานสองโดยใช้ตัวอักษร ASCII 64 ตัว (A–Z, a–z, 0–9, +, /) เมื่อนำมาใช้กับรูปภาพ Base64 จะแปลงไบต์ของรูปภาพดิบให้เป็นสตริงข้อความยาวๆ ที่สามารถฝังลงในโค้ดต้นฉบับได้โดยตรง วิธีที่พบบ่อยที่สุดในการใช้รูปภาพ Base64 ในการพัฒนาเว็บคือผ่าน Data URIs — ซึ่งเป็นรูปแบบที่อนุญาตให้ใส่ข้อมูลอินไลน์ใน URL โดยใช้รูปแบบ data:[MIME type];base64,[encoded data]

ควรใช้รูปภาพ Base64 เมื่อใด

เมื่อใดที่ไม่ควรใช้รูปภาพ Base64

การเข้ารหัส Base64 จะเพิ่มขนาดไฟล์ขึ้นประมาณ 33% สำหรับรูปภาพขนาดใหญ่ (ภาพถ่าย, แบนเนอร์) ควรใช้ไฟล์รูปภาพแบบดั้งเดิมที่ให้บริการผ่าน HTTP/2 ซึ่งรองรับการรับส่งข้อมูลพร้อมกันหลายรายการ หลีกเลี่ยง Base64 สำหรับรูปภาพที่มีขนาดใหญ่กว่า 10–20KB ในงานจริง เนื่องจากภาระด้านขนาดที่เพิ่มขึ้นจะบดบังประโยชน์จากการลดการร้องขอ HTTP นอกจากนี้ สตริง Base64 ขนาดใหญ่ยังไม่สามารถแยกไปเก็บไว้ในแคชของเบราว์เซอร์ได้

รูปแบบรูปภาพที่รองรับ

วิธีใช้งานเครื่องมือนี้

1. อัปโหลดรูปภาพของคุณ: ลากและวางไฟล์รูปภาพลงในพื้นที่อัปโหลด คลิกเพื่อเลือกไฟล์ หรือวางรูปภาพจากคลิปบอร์ดโดยใช้ Ctrl+V (Cmd+V บน Mac)
2. ดูตัวอย่างและตรวจสอบข้อมูลเมตา: เครื่องมือจะแสดงตัวอย่างรูปภาพของคุณทันทีพร้อมข้อมูลเมตา เช่น ชื่อไฟล์, ขนาดมิติ, MIME type และการเปรียบเทียบขนาดระหว่างข้อมูลต้นฉบับและข้อมูลที่เข้ารหัส
3. เลือกรูปแบบเอาต์พุต: สลับระหว่างสี่แท็บเอาต์พุต — Raw Base64 (เฉพาะสตริงที่เข้ารหัส), Data URI (พร้อมคำนำหน้า MIME), แท็ก HTML <img> (พร้อมสำหรับนำไปวาง) หรือคุณสมบัติ background-image ของ CSS
4. คัดลอกผลลัพธ์: คลิกปุ่ม "⧉ คัดลอก" เพื่อคัดลอกเอาต์พุตที่เข้ารหัสไปยังคลิปบอร์ด พร้อมสำหรับนำไปวางในโค้ดของคุณ

คู่มือรูปแบบเอาต์พุต

Raw Base64 String

ข้อความที่เข้ารหัสแบบ Base64 ล้วนๆ โดยไม่มีคำนำหน้า ใช้รูปแบบนี้เมื่อคุณต้องการข้อมูลดิบสำหรับการปรับแต่งเอง, การเรียกใช้ API หรือเมื่อคุณจะเพิ่มคำนำหน้า MIME ด้วยตัวเอง

Data URI

Data URI ที่สมบูรณ์ซึ่งรวมคำนำหน้า MIME type (เช่น data:image/png;base64,iVBOR...) นี่คือรูปแบบที่ใช้งานได้หลากหลายที่สุด — สามารถใช้ได้โดยตรงในแอตทริบิวต์ src ของ HTML, ค่า url() ใน CSS และการโหลดรูปภาพใน JavaScript

HTML <img> Tag

องค์ประกอบรูปภาพ HTML ที่พร้อมใช้งาน โดยมี Base64 data URI เป็น src พร้อมด้วยแอตทริบิวต์ width และ height เพื่อการจัดวางเลย์เอาต์ที่ถูกต้อง นำไปวางใน HTML ของคุณได้ทันที

CSS background-image

การประกาศคุณสมบัติ CSS ที่สมบูรณ์โดยใช้ background-image: url('data:...') เพิ่มลงในกฎ CSS ใดๆ เพื่อใช้รูปภาพเป็นพื้นหลังโดยไม่ต้องอ้างอิงไฟล์ภายนอก

ความเป็นส่วนตัวและความปลอดภัย

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

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

การเข้ารหัส Base64 สำหรับรูปภาพคืออะไร?

การเข้ารหัส Base64 จะแปลงข้อมูลรูปภาพฐานสองให้เป็นตัวอักษรข้อความ ASCII สิ่งนี้ช่วยให้คุณสามารถฝังรูปภาพลงในโค้ด HTML, CSS หรือ JavaScript ได้โดยตรงในรูปแบบ data URIs ทำให้ไม่จำเป็นต้องมีการร้องขอไฟล์รูปภาพแยกต่างหาก สตริงที่เข้ารหัสจะมีขนาดใหญ่กว่าข้อมูลฐานสองต้นฉบับประมาณ 33%

ควรใช้รูปภาพที่เข้ารหัส Base64 เมื่อใด?

ใช้ Base64 สำหรับรูปภาพขนาดเล็ก เช่น ไอคอน, โลโก้ และองค์ประกอบ UI (โดยทั่วไปมีขนาดต่ำกว่า 10KB) ซึ่งจะช่วยลดการร้องขอ HTTP และทำให้การปรับใช้สะดวกขึ้น หลีกเลี่ยงการใช้กับรูปภาพขนาดใหญ่เนื่องจากขนาดที่เพิ่มขึ้น 33% จะส่งผลเสียต่อประสิทธิภาพ นอกจากนี้ยังมีประโยชน์สำหรับเทมเพลตอีเมล, เอกสาร HTML ไฟล์เดียว และรูปภาพพื้นหลังใน CSS

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

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

รองรับรูปแบบรูปภาพใดบ้าง?

ตัวแปลงนี้รองรับรูปแบบรูปภาพทั่วไปทั้งหมด รวมถึง PNG, JPEG, GIF, WebP, SVG, BMP และ ICO เครื่องมือจะตรวจหา MIME type โดยอัตนัยและสร้างคำนำหน้า data URI ที่ถูกต้องสำหรับแต่ละรูปแบบ

Base64 string และ Data URI ต่างกันอย่างไร?

สตริง Base64 เป็นเพียงข้อความที่แสดงข้อมูลรูปภาพที่เข้ารหัส ส่วน Data URI จะรวมคำนำหน้าด้วย MIME type (เช่น data:image/png;base64,) ตามด้วยสตริง Base64 โดย Data URI สามารถนำไปใช้ในแอตทริบิวต์ src ของ HTML และค่า url() ใน CSS ได้โดยตรง

แหล่งข้อมูลเพิ่มเติม

• Data URLs - MDN Web Docs
• Base64 Encoding - MDN Web Docs
• Base64 - Wikipedia