เครื่องมือแปลง รูปภาพ ⇔ Base64

แปลงไฟล์รูปภาพและ Base64 (Data URI) ได้สองทาง

เข้ารหัสรูปภาพเป็น Base64 เพื่อแปลงเป็น Data URI หรือกู้คืนรูปภาพจากสตริง Base64 รองรับรูปแบบ PNG, JPEG, GIF, WebP ลากและวางเพื่อใช้งานง่าย การประมวลผลทั้งหมดเสร็จสมบูรณ์ในเบราว์เซอร์และไม่มีการบันทึกข้อมูล

วิธีใช้งาน

แปลงได้ง่ายใน 3 ขั้นตอน:

เลือกโหมดการแปลง
เลือกแท็บ「รูปภาพ→Base64」หรือ「Base64→รูปภาพ」
ป้อนข้อมูล
โหมดรูปภาพ: ลากและวางหรือเลือกไฟล์รูปภาพ โหมด Base64: วางสตริง Base64
ใช้ผลลัพธ์การแปลง
ผลลัพธ์การแปลงจะแสดงทันที คัดลอก Base64 ด้วยปุ่มคัดลอกหรือบันทึกรูปภาพด้วยปุ่มดาวน์โหลด

ป้องกันความเป็นส่วนตัว: การประมวลผลทั้งหมดทำงานในเบราว์เซอร์และไม่มีการส่งหรือบันทึกข้อมูลรูปภาพไปยังเซิร์ฟเวอร์

เครื่องมือแปลง รูปภาพ ⇔ Base64

📁

ลากและวางไฟล์รูปภาพหรือคลิกเพื่อเลือก

รูปแบบที่รองรับ: PNG, JPEG, GIF, WebP, SVG (แนะนำสูงสุด 10MB)

ตัวอย่าง

ชื่อไฟล์

ขนาดไฟล์

ขนาด

รูปแบบ

ผลลัพธ์การเข้ารหัส Base64 (Data URI)

ป้อนสตริง Base64

ตัวอย่าง

ตัวอย่างการใช้งานจริงของการแปลงรูปภาพ Base64

การเข้ารหัส Base64 ของรูปภาพมีการใช้งานในการพัฒนาเว็บดังต่อไปนี้:

1. ฝังรูปภาพใน HTML หรือ CSS

การฝังไอคอนเล็กหรือโลโก้โดยตรงในแท็ก <img> ของ HTML หรือ background-image ของ CSS จะช่วยลดคำขอ HTTP และปรับปรุงความเร็วในการโหลดหน้า เหมาะสำหรับใช้แทนฟอนต์ไอคอน

2. ทางเลือกแทน CSS Sprite

แทนที่จะใช้「CSS Sprite」ที่รวมรูปภาพเล็กหลายรูปเข้าเป็นไฟล์เดียว การเข้ารหัสแต่ละรูปภาพเป็น Base64 และฝังใน CSS จะทำให้การจัดการง่ายขึ้น

3. ฝังรูปภาพใน HTML Email

เนื่องจากไคลเอนต์อีเมลบางตัวจะบล็อกการโหลดรูปภาพภายนอก การฝังรูปภาพสำคัญ (เช่น โลโก้) เป็น Data URI จะช่วยให้แสดงผลได้อย่างแน่นอน

4. ส่งรูปภาพใน REST API

เมื่อส่งและรับข้อมูลรูปภาพใน JSON API การเข้ารหัส Base64 ช่วยให้จัดการข้อมูลไบนารีในรูปแบบข้อความได้ สามารถส่งรูปภาพในรูปแบบ JSON ง่ายโดยไม่ต้องใช้การสื่อสารแบบหลายส่วน

5. แอปพลิเคชันออฟไลน์

ใน Progressive Web Apps (PWA) หรือแอป Electron การเข้ารหัสรูปภาพเป็น Base64 และฝังใน HTML จะช่วยให้แสดงรูปภาพได้แน่นอนแม้ในสภาพแวดล้อมออฟไลน์

6. การพัฒนาแอปมือถือ

การใช้รูปภาพที่เข้ารหัส Base64 ใน React Native, Ionic, Flutter และเฟรมเวิร์กข้ามแพลตฟอร์มอื่นๆ ช่วยให้การจัดการรูปภาพเป็นมาตรฐานเดียวกันในแต่ละแพลตฟอร์ม

Data URI คืออะไร? ทำความเข้าใจหลักการ

Data URI (ข้อมูล URI หรือเรียกว่า Data URL) เป็นรูปแบบ URL หนึ่งที่ใช้สำหรับฝังไฟล์เล็กเช่นรูปภาพหรือฟอนต์โดยตรงใน HTML หรือ CSS จะเข้ารหัสเนื้อหาของไฟล์เป็น Base64 เป็นข้อความและแสดงเป็นส่วนหนึ่งของ URL

รูปแบบ Data URI

Data URI เขียนในรูปแบบต่อไปนี้:

data:[ประเภท MIME];[วิธีเข้ารหัส],[ข้อมูลที่เข้ารหัสแล้ว]

ตัวอย่าง (PNG):
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...

ข้อดีของ Data URI

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

ข้อเสียของ Data URI

ขนาดไฟล์เพิ่มขึ้น: การเข้ารหัส Base64 ทำให้ขนาดข้อมูลเพิ่มขึ้นประมาณ 33%
ประสิทธิภาพแคชลดลง: เมื่ออัพเดตรูปภาพ ต้องดาวน์โหลดไฟล์ HTML/CSS ทั้งหมดใหม่
อ่านยากขึ้น: โค้ดต้นฉบับยาวขึ้น ทำให้การดูแลรักษายาก

แนวทางปฏิบัติที่ดีที่สุด

กรณีที่ควรใช้ Data URI

✅ ไอคอนเล็กหรือโลโก้ (แนะนำต่ำกว่า 5KB)
✅ รูปภาพตกแต่งที่ใช้บ่อย (พื้นหลังปุ่ม ฯลฯ)
✅ รูปภาพสำคัญที่ต้องการรองรับออฟไลน์

กรณีที่ไม่ควรใช้ Data URI

❌ รูปภาพขนาดใหญ่ (มากกว่า 10KB): ขนาดไฟล์พองตัว
❌ รูปภาพที่อัพเดตบ่อย: ประสิทธิภาพแคชแย่
❌ รูปภาพที่ใช้ซ้ำหลายหน้า: ฝังซ้ำในแต่ละหน้า

⚠️ โดยทั่วไปแนะนำให้ใช้ Data URI สำหรับรูปภาพเล็กต่ำกว่า 5KB สำหรับรูปภาพขนาดใหญ่ การใช้แท็ก <img> ปกติหรือโหลดจากไฟล์ภายนอกจะมีประสิทธิภาพมากกว่า

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

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

รองรับ PNG, JPEG, GIF, WebP, SVG และรูปแบบรูปภาพทั้งหมดที่เบราว์เซอร์รองรับ ที่พบบ่อยที่สุดคือ PNG และ JPEG

มีข้อจำกัดขนาดรูปภาพที่แปลงได้หรือไม่?

ทางเทคนิคไม่มีข้อจำกัด แต่เพื่อประสิทธิภาพและหน่วยความจำของเบราว์เซอร์ แนะนำต่ำกว่า 10MB ในทางปฏิบัติรูปภาพเล็กต่ำกว่า 5KB จะมีประสิทธิภาพสูงสุด

การเข้ารหัส Base64 ทำให้ขนาดรูปภาพเพิ่มขึ้นเท่าไหร่?

การเข้ารหัส Base64 จะเพิ่มขนาดไฟล์เดิมประมาณ 133% (เพิ่มขึ้นประมาณ 33%) เช่น รูปภาพ 9KB จะกลายเป็นสตริง Base64 ประมาณ 12KB

PNG โปร่งใสสามารถแปลงเป็น Base64 ได้หรือไม่?

ได้ รูปภาพ PNG โปร่งใสสามารถแปลงได้โดยตรง ข้อมูลความโปร่งใสจะถูกเก็บรักษาไว้ แม้ฝังใน HTML หรือ CSS ก็จะแสดงความโปร่งใสได้อย่างถูกต้อง

วิธีฝังสตริง Base64 ใน HTML?

วางโดยตรงในแอตทริบิวต์ src ของแท็ก <img> ตัวอย่าง: <img src="data:image/png;base64,iVBORw0KG...">

วิธีใช้เป็น background-image ของ CSS?

วางในฟังก์ชัน url() แบบนี้: background-image: url('data:image/png;base64,iVBORw0KG...');

รูปภาพที่อัพโหลดจะถูกบันทึกไว้ในเซิร์ฟเวอร์หรือไม่?

ไม่ การประมวลผลทั้งหมดเสร็จสมบูรณ์ในเบราว์เซอร์ ข้อมูลรูปภาพจะไม่ถูกส่งไปยังเซิร์ฟเวอร์

สามารถใช้ในเว็บไซต์เชิงพาณิชย์ได้หรือไม่?

ได้ เครื่องมือนี้ฟรีโดยสมบูรณ์และสามารถใช้ได้อย่างเสรีทั้งเชิงพาณิชย์และไม่ใช่เชิงพาณิชย์