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

ฝังภาพเป็นข้อความด้วยตัวแปลงรูปภาพเป็น Base64 ของ MiniWebtool วางหรือลากไฟล์ไม่เกิน 20 MB ได้หลายภาพพร้อมกัน แล้วรับ Base64, data URI, แท็กรูปภาพ HTML หรือโค้ดพื้นหลัง CSS ของแต่ละภาพในเบราว์เซอร์

ไม่แน่ใจว่าใช้อย่างไร? ถาม AI

Gemini (คัดลอกและเปิด)

เมื่อใช้ Gemini ให้วางคำถามที่คัดลอกลงในแชต คุณคัดลอกคำถามด้านล่างได้เช่นกัน

ดูคำถาม

ฉันอยากเข้าใจวิธีใช้เครื่องมือ ตัวแปลงรูปภาพเป็น Base64 ของ MiniWebtool: https://miniwebtool.com/th/%E0%B8%95%E0%B8%B1%E0%B8%A7%E0%B9%81%E0%B8%9B%E0%B8%A5%E0%B8%87%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E%E0%B9%80%E0%B8%9B%E0%B9%87%E0%B8%99-base64/ เครื่องมือนี้ใช้ทำอะไร ต้องป้อนข้อมูลหรือตั้งค่าอะไรบ้าง และใช้งานกับอ่านผลลัพธ์อย่างไร ช่วยอธิบายทีละขั้นตอนด้วยตัวอย่างง่าย ๆ หนึ่งตัวอย่าง โดยใช้หน้านี้เป็นแหล่งข้อมูลและตอบเป็นภาษาไทย

ใช้งานฟรีไม่ต้องสมัครสมาชิกผลลัพธ์ทันที

ตัวแปลงรูปภาพเป็น Base64ลองใช้เลย — ฟรี ▼

ตัวอย่างด่วน:

🖼

วางรูปภาพหนึ่งรูปหรือหลายรูปที่นี่

หรือคลิกเพื่อเลือกไฟล์

📁 เลือกไฟล์ ↓ ลากและวาง 📋 Ctrl+V เพื่อวาง

รองรับ: PNG, JPEG, GIF, WebP, SVG, BMP, ICO — สูงสุด 20MB

ไฟล์ —

ประเภท —

มิติ —

ต้นฉบับ —

Base64 —

ขนาดที่เปลี่ยน —

การเปรียบเทียบขนาด

ต้นฉบับ

Base64

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

เกี่ยวกับ ตัวแปลงรูปภาพเป็น Base64

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

สรุปภาพรวม

ตัวแปลงรูปภาพเป็น Base64 เข้ารหัสไฟล์รูปภาพขนาดไม่เกิน 20 MB เป็นสตริงข้อความ Base64 และให้ data URI แท็ก img ของ HTML และส่วนประกาศ background-image ของ CSS โดยแต่ละอันมีปุ่มคัดลอก

ตัวแปลงรูปภาพเป็น Base64: ฟีเจอร์โดยสรุป
ฟีเจอร์	สิ่งที่ได้รับ	เหมาะสำหรับ
วิธีป้อนข้อมูล	ลากวางไฟล์ คลิกเพื่อเลือกไฟล์ หรือวางภาพจากคลิปบอร์ด รับไฟล์สูงสุด 20 MB	เข้ารหัสภาพหน้าจอที่เพิ่งคัดลอกมา
ผลลัพธ์สี่แบบ	Raw Base64, data URI, แท็ก img ของ HTML พร้อมความกว้างและความสูง หรือประกาศ background-image ของ CSS แต่ละแบบอยู่ในแท็บของตัวเอง	วางภาพลงใน HTML, CSS หรือโค้ดโดยตรง
รูปแบบภาพ	PNG, JPEG, GIF, WebP, SVG, BMP และ ICO ชนิด MIME ที่ตรงกันจะถูกเพิ่มใน data URI อัตโนมัติ	ไอคอน favicon และกราฟิกเวกเตอร์
ตัวอย่างและรายละเอียด	แสดงตัวอย่างพร้อมชื่อไฟล์ ขนาด และชนิด MIME	ยืนยันว่าเลือกไฟล์ถูกต้อง
เปรียบเทียบขนาด	เปรียบเทียบขนาดไฟล์ต้นฉบับกับขนาดหลังเข้ารหัส ข้อความ Base64 มีขนาดใหญ่กว่าไฟล์ไบนารีประมาณ 33%	ตัดสินว่าไอคอนเล็กควรฝังหรือไม่
การประมวลผลส่วนตัว	ไฟล์ถูกอ่านในเบราว์เซอร์ของคุณและไม่ถูกอัปโหลดไปยังเซิร์ฟเวอร์	รูปภาพที่เป็นความลับ

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

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

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

⚡

ไอคอนและโลโก้ขนาดเล็ก

ฝังไอคอน UI ขนาดเล็ก, favicons และโลโก้ขนาดเล็ก (ต่ำกว่า 10KB) เพื่อลดการร้องขอ HTTP เพิ่มเติมและช่วยให้โหลดหน้าเว็บได้เร็วขึ้น

✉

เทมเพลตอีเมล

โปรแกรมอ่านอีเมลหลายโปรแกรมจะบล็อกรูปภาพจากภายนอกโดยค่าเริ่มต้น รูปภาพอินไลน์แบบ Base64 จะแสดงผลทันทีโดยไม่ต้องรอให้ผู้ใช้กด "โหลดรูปภาพ"

📄

HTML ไฟล์เดียว

สร้างเอกสาร HTML ที่สมบูรณ์ในตัวเองโดยฝังทรัพยากรทั้งหมดไว้ — เหมาะสำหรับรายงาน, ใบแจ้งหนี้ และเอกสารแบบออฟไลน์

🎨

พื้นหลัง CSS

ฝังลวดลายขนาดเล็ก, แพทเทิร์น และรูปภาพตกแต่งลงในสไตล์ชีทของคุณโดยตรงโดยใช้ background-image: url(data:...)

🔧

API และ JSON Payloads

รวมข้อมูลรูปภาพในการร้องขอ API และออบเจกต์ JSON ในกรณีที่ไม่สามารถส่งข้อมูลฐานสองได้โดยตรง

📱

ทรัพยากรในแอปมือถือ

รวบรวมทรัพยากรรูปภาพขนาดเล็กเป็นสตริง Base64 ในโค้ดของ React Native, Flutter หรือแอปไฮบริดเพื่อให้ใช้งานแบบออฟไลน์ได้

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

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

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

ตัวแปลงรูปภาพเป็น Base64: รูปแบบรูปภาพที่รองรับ
รูปแบบ	MIME Type	เหมาะสำหรับ
PNG	`image/png`	ไอคอน, ภาพสกรีนช็อต, กราฟิกที่ต้องการความโปร่งใส
JPEG	`image/jpeg`	ภาพถ่าย, รูปภาพที่มีรายละเอียดซับซับซ้อน
GIF	`image/gif`	ภาพเคลื่อนไหวง่ายๆ, กราฟิกที่มีสีน้อย
WebP	`image/webp`	รูปแบบเว็บสมัยใหม่ที่มีการบีบอัดที่เหนือกว่า
SVG	`image/svg+xml`	กราฟิกแบบเวกเตอร์, ไอคอนที่ปรับขนาดได้
BMP	`image/bmp`	รูปภาพบิตแมปที่ไม่มีการบีบอัด
ICO	`image/x-icon`	Favicons, ไอคอนของ Windows

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

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

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

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 ได้โดยตรง

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

อ้างอิงเนื้อหา หน้าหรือเครื่องมือนี้ว่า:

"ตัวแปลงรูปภาพเป็น Base64" ที่ https://MiniWebtool.com/th/ตัวแปลงรูปภาพเป็น-base64/ จาก MiniWebtool, https://MiniWebtool.com/

โดยทีมงาน miniwebtool อัปเดตเมื่อ: 7 มีนาคม 2026

พูดคุยกับ AI ที่คุณชื่นชอบ