วิธีแปลง Base64 เป็นรูปภาพและในทางกลับกัน

Base64 Encoding เป็นเทคนิคพื้นฐานสำหรับการแสดงข้อมูลรูปภาพไบนารีเป็นข้อความ ไม่ว่าคุณจะฝังรูปภาพโดยตรงใน HTML, ส่งรูปภาพผ่าน API หรือเก็บข้อมูลรูปภาพในฐานข้อมูล การเข้าใจวิธีการแปลงระหว่าง Base64 และรูปแบบรูปภาพเป็นทักษะที่จำเป็นสำหรับนักพัฒนา Web

Base64 Encoding คืออะไร?

Base64 เป็นรูปแบบการเข้ารหัสแบบไบนารีเป็นข้อความ ใช้ชุดอักขระ 64 ตัวเพื่อแปลงข้อมูลไบนารีเป็นสตริง ASCII: A-Z, a-z, 0-9, + และ / อักขระ = ใช้สำหรับ padding ทุกสามไบต์ของข้อมูลไบนารีจะแสดงเป็นอักขระ Base64 สี่ตัว หมายความว่าข้อมูลที่เข้ารหัส Base64 มีขนาดใหญ่กว่าข้อมูลไบนารีต้นฉบับประมาณ 33%

การเข้ารหัสนี้พัฒนาขึ้นมาแต่แรกสำหรับระบบอีเมลที่ส่งได้เฉพาะข้อความ ปัจจุบัน Base64 ถูกใช้อย่างแพร่หลายในการพัฒนา Web เพื่อฝังรูปภาพขนาดเล็กลงใน HTML, CSS และ JSON payload โดยตรง ลดความจำเป็นในการส่ง HTTP request แยกต่างหาก

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

การแปลงรูปภาพเป็นสตริง Base64 มีเหตุผลเชิงปฏิบัติหลายประการ:

การฝังแบบ Inline: ใช้ Data URI เพื่อฝังรูปภาพขนาดเล็กลงใน HTML หรือ CSS โดยตรง ลดจำนวน HTTP request ที่หน้าต้องส่ง
API Payload: รวมข้อมูลรูปภาพใน JSON API response โดยไม่ต้องมี endpoint อัปโหลดไฟล์แยกต่างหากหรือการอ้างอิง CDN
การจัดเก็บในฐานข้อมูล: เมื่อระบบไฟล์หรือ object storage ไม่พร้อมใช้งาน ให้เก็บข้อมูลรูปภาพในฟิลด์ฐานข้อมูลแบบข้อความ
เทมเพลตอีเมล: ฝังรูปภาพในอีเมล HTML เพื่อให้แสดงผลโดยไม่ต้องใช้ทรัพยากรภายนอก เพิ่มความเข้ากันได้กับไคลเอนต์อีเมล
การถ่ายโอนข้อมูล: ถ่ายโอนข้อมูลรูปภาพไบนารีอย่างปลอดภัยผ่านช่องทางที่รองรับเฉพาะข้อความ (เช่น JSON, XML หรือฟิลด์ฟอร์ม)

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

การใช้ JavaScript ในเบราว์เซอร์

เบราว์เซอร์มี FileReader API และ Canvas API สำหรับการแปลงรูปภาพเป็น Base64 วิธีการ FileReader อ่านไฟล์รูปภาพเป็น Data URL ในขณะที่วิธีการ Canvas ช่วยให้คุณปรับขนาดหรือแก้ไขรูปภาพก่อนเข้ารหัส

เมื่อใช้ Canvas คุณวาดรูปภาพลงบน Canvas element จากนั้นเรียก toDataURL() เพื่อรับสตริง Base64 วิธีการนี้ยังช่วยให้คุณเปลี่ยนรูปแบบและคุณภาพผลลัพธ์โดยการส่งพารามิเตอร์เช่น 'image/jpeg' และค่าคุณภาพระหว่าง 0 ถึง 1

การใช้เครื่องมือออนไลน์

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

การใช้ Command Line

บน Linux และ macOS คุณสามารถใช้คำสั่ง base64 เพื่อเข้ารหัสรูปภาพโดยตรงจาก terminal มีประโยชน์สำหรับการเขียนสคริปต์และเวิร์กโฟลว์อัตโนมัติที่ต้องประมวลผลรูปภาพหลายรูปในครั้งเดียว

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

ในเบราว์เซอร์

element รูปแบบคือ data:[MIME-type];base64,[data] ตัวอย่างเช่น รูปภาพ PNG ใช้ data:image/png;base64,iVBORw0KGgo...

ในการบันทึกรูปภาพเป็นไฟล์ คุณสามารถสร้างลิงก์ดาวน์โหลดโดยการแปลงข้อมูล Base64 เป็น Blob object และสร้าง object URL วิธีการนี้ทำงานทั้งหมดในเบราว์เซอร์ โดยไม่ต้องประมวลผลฝั่งเซิร์ฟเวอร์

การใช้เครื่องมือออนไลน์

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

ทำความเข้าใจ Data URI

Data URI เป็นวิธีมาตรฐานในการฝังรูปภาพที่เข้ารหัส Base64 ในหน้าเว็บ ไวยากรณ์เต็มประกอบด้วย MIME type, การประกาศการเข้ารหัส และข้อมูล Base64 เอง

รูปแบบ Data URI ทั่วไปสำหรับรูปภาพรวมถึง:

JPEG: data:image/jpeg;base64,/9j/4AAQ...
PNG: data:image/png;base64,iVBORw0KGgo...
GIF: data:image/gif;base64,R0lGODlh...
WebP: data:image/webp;base64,UklGRj...
SVG: data:image/svg+xml;base64,PHN2Zy...

เมื่อใดควรใช้รูปภาพ Base64 (และเมื่อใดไม่ควรใช้)

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

สถานการณ์การใช้งานที่เหมาะสม

ไอคอนขนาดเล็กและองค์ประกอบตกแต่งที่ต่ำกว่า 2KB
รูปภาพใน JSON API Response
รูปภาพเทมเพลตอีเมล
Single Page Application ที่มีรูปภาพน้อย
การสร้าง Prototype และการสาธิตอย่างรวดเร็ว

สถานการณ์ที่ควรหลีกเลี่ยงการใช้ Base64

รูปภาพขนาดใหญ่เกิน 10KB (ค่าใช้จ่ายขนาด 33% กลายเป็นนัยสำคัญ)
หน้าที่มีรูปภาพหลายรูป (รูปภาพแบบ inline แต่ละรูปเพิ่มขนาด HTML)
รูปภาพที่ต้องการการแคชของเบราว์เซอร์ (รูปภาพ Base64 ไม่สามารถแคชแยกต่างหากได้)
รูปภาพ Responsive ที่ต้องการเวอร์ชันต่างๆ สำหรับขนาดหน้าจอที่แตกต่างกัน

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

ปัญหาทั่วไปและวิธีแก้ไข

ผลลัพธ์เสียหาย: ตรวจสอบให้แน่ใจว่าสตริง Base64 สมบูรณ์และไม่ถูกตัดทอน อักขระที่ขาดหายจะทำให้การถอดรหัสล้มเหลว
MIME Type ผิด: ใส่ MIME Type ที่ถูกต้องใน Data URI เสมอ PNG ที่เข้ารหัสด้วย MIME type แบบ JPEG จะแสดงผลไม่ถูกต้อง
อักขระขึ้นบรรทัดใหม่ในสตริง: บางระบบแทรกอักขระขึ้นบรรทัดใหม่ในสตริง Base64 ลบออกก่อนถอดรหัส
URL-Safe Variant: Base64URL ใช้ - และ _ แทน + และ / แปลงอักขระเหล่านี้ก่อนถอดรหัสด้วย Base64 มาตรฐาน

ต้องการแปลงรูปภาพเป็น Base64 หรือถอดรหัสสตริง Base64 กลับเป็นรูปภาพ? ลองใช้เครื่องมือฟรีของเรา

รูปภาพเป็น Base64

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

Base64 Encoding เพิ่มขนาดไฟล์หรือไม่?

ใช่ Base64 Encoding เพิ่มขนาดไฟล์ประมาณ 33% เนื่องจาก Base64 แสดงข้อมูลไบนารีทุก 3 ไบต์เป็นอักขระ ASCII 4 ตัว ค่าใช้จ่ายนี้เป็นราคาที่ต้องจ่ายเพื่อให้สามารถฝังข้อมูลไบนารีในรูปแบบที่ใช้ข้อความได้

Base64 Image Encoding มีผลต่อประสิทธิภาพหรือไม่?

การใช้รูปภาพ Base64 มากเกินไปเป็นอันตรายต่อประสิทธิภาพ พวกมันเพิ่มขนาด HTML, ไม่สามารถถูกแคชแยกโดยเบราว์เซอร์ และบล็อกการเรนเดอร์หน้า อย่างไรก็ตาม สำหรับไอคอนขนาดเล็กต่ำกว่า 2KB, Base64 แบบ inline สามารถลด HTTP request และปรับปรุงเวลาโหลด

สามารถแปลงรูปแบบรูปภาพใดๆ เป็น Base64 ได้หรือไม่?

ใช่ ไฟล์ไบนารีใดๆ รวมถึงรูปแบบรูปภาพทั้งหมด (JPEG, PNG, GIF, WebP, SVG, BMP) สามารถแปลงเป็น Base64 ได้ สตริง Base64 ที่สร้างขึ้นมีคำนำหน้า Data URI ที่ระบุ MIME type ต้นฉบับ

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

Base64 เป็นอัลกอริทึมการเข้ารหัสที่แปลงข้อมูลไบนารีเป็นข้อความ ASCII Data URI เป็นรูปแบบการฝังข้อมูลที่เข้ารหัส Base64 ลงใน URL โดยตรง โดยมีคำนำหน้าเป็น MIME type และข้อมูลการเข้ารหัส รูปแบบ Data URI คือ: data:[mediatype][;base64],data