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

Base64 Image Data URL คืออะไร?

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

รูปแบบมีลักษณะดังนี้:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

แยกส่วนประกอบ:

• data: — คำนำหน้า data URI scheme
• image/png — MIME type ของรูปภาพที่ฝัง
• ;base64 — ระบุการเข้ารหัส Base64
• ,iVBORw0... — ข้อมูลรูปภาพที่เข้ารหัส Base64 จริง

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

การฝังรูปภาพเป็น Base64 มีประโยชน์ในหลายสถานการณ์:

ลดจำนวน HTTP Requests

ไฟล์รูปภาพภายนอกแต่ละไฟล์ต้องการ HTTP request แยกต่างหาก Base64 data URL ขจัด requests เหล่านี้ ซึ่งสามารถปรับปรุงเวลาในการโหลดหน้าเว็บ — โดยเฉพาะบนการเชื่อมต่อที่มีความหน่วงสูงหรือสำหรับหน้าที่มี assets ขนาดเล็กจำนวนมาก

เอกสารที่สมบูรณ์ในตัวเอง

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

หน้าที่เน้นประสิทธิภาพ

สำหรับรูปภาพ hero ที่อยู่ส่วนบนของหน้า (above-the-fold) และองค์ประกอบ UI ที่สำคัญ การขจัดการเดินทางไป-กลับเพิ่มเติมสามารถปรับปรุงเมตริกอย่าง Largest Contentful Paint (LCP) อย่างไรก็ตาม สิ่งนี้มีประโยชน์เฉพาะกับรูปภาพขนาดเล็ก — สำหรับรูปภาพขนาดใหญ่ การฝังรูปภาพกลับส่งผลเสีย

ทำงานแบบออฟไลน์

เมื่อรูปภาพถูกฝังเป็น data URL มันทำงานได้โดยไม่ต้องเชื่อมต่อเครือข่าย สิ่งนี้มีคุณค่าสำหรับเว็บแอปพลิเคชันออฟไลน์และ Progressive Web Apps (PWAs)

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

วิธีที่ 1: ใช้เครื่องมือออนไลน์ (ง่ายที่สุด)

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

วิธีที่ 2: ใช้ JavaScript ในเบราว์เซอร์

FileReader API ให้วิธีการที่ตรงไปตรงมาในการแปลงรูปภาพที่ผู้ใช้เลือกเป็น Base64:

function imageToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(new Error('Failed to read file'));
    reader.readAsDataURL(file);
  });
}

// Usage with a file input
document.getElementById('imageInput').addEventListener('change', async (event) => {
  const file = event.target.files[0];
  if (!file) return;

  const dataUrl = await imageToBase64(file);
  console.log(dataUrl);
  // Output: data:image/jpeg;base64,/9j/4AAQ...
});

วิธีที่ 3: ใช้ Canvas API

หากคุณต้องการปรับขนาด ครอบตัด หรือบีบอัดรูปภาพก่อนแปลงเป็น Base64 Canvas API คือทางเลือกที่เหมาะสม:

function canvasToBase64(canvas, format = 'image/webp', quality = 0.8) {
  return canvas.toDataURL(format, quality);
}

// Example: Resize an image before converting
async function resizeImageToBase64(file, maxWidth = 800) {
  const bitmap = await createImageBitmap(file);
  const canvas = document.createElement('canvas');
  const ratio = Math.min(maxWidth / bitmap.width, 1);
  canvas.width = bitmap.width * ratio;
  canvas.height = bitmap.height * ratio;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
  return canvas.toBase64('image/jpeg', 0.85);
}

วิธีที่ 4: ใช้ Node.js

ทางฝั่งเซิร์ฟเวอร์ ใช้โมดูล fs กับ Buffer เพื่อแปลงไฟล์รูปภาพเป็น Base64:

const fs = require('fs');
const path = require('path');

function encodeImageToBase64(filePath) {
  const buffer = fs.readFileSync(filePath);
  const base64 = buffer.toString('base64');

  // Detect MIME type from extension
  const ext = path.extname(filePath).toLowerCase();
  const mimeTypes = {
    '.png': 'image/png',
    '.jpg': 'image/jpeg',
    '.jpeg': 'image/jpeg',
    '.gif': 'image/gif',
    '.webp': 'image/webp',
    '.svg': 'image/svg+xml',
    '.ico': 'image/x-icon',
  };
  const mimeType = mimeTypes[ext] || 'image/png';

  return `data:${mimeType};base64,${base64}`;
}

const dataUrl = encodeImageToBase64('logo.png');
console.log(dataUrl);

วิธีที่ 5: ใช้ Command Line

บน Linux และ macOS คุณสามารถใช้คำสั่ง base64 ในตัว:

# Encode to Base64 and wrap as a data URL
echo "data:image/png;base64,$(base64 -w 0 image.png)"

วิธีใช้รูปภาพ Base64 ใน HTML

โดยตรงในแท็ก <img>:

<img
  src="data:image/webp;base64,UklGRpYCAABXRUJQVlA4WAoAAAA..."
  alt="Inline Logo"
  width="200"
  height="100"
/>

วิธีใช้รูปภาพ Base64 ใน CSS

เป็นภาพพื้นหลัง:

.icon-warning {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIi8+PGxpbmUgeDE9IjEyIiB5MT0iMTYiIHgyPSIxMiIgeTI9IjEyIi8+PGxpbmUgeDE9IjEyIiB5MT0iOCIgeDI9IjEyLjAxIiB5Mj0iOCIvPjwvc3ZnPg==');
  width: 24px;
  height: 24px;
}

ข้อควรพิจารณาด้านประสิทธิภาพและแนวทางปฏิบัติที่ดีที่สุด

เมื่อรูปภาพ Base64 มีประโยชน์

• ไอคอนขนาดเล็กและองค์ประกอบ UI ที่ต่ำกว่า 10 KB
• รูปภาพ above-the-fold ที่สำคัญ ที่ขัดขวางการแสดงผล
• Sprites และไอคอน SVG ที่ใช้ทั่วทั้งหน้า
• เทมเพลตอีเมล ที่รูปภาพภายนอกมักถูกบล็อก
• เว็บแอปออฟไลน์ และเอกสารที่สมบูรณ์ในตัวเอง

เมื่อรูปภาพ Base64 ส่งผลเสีย

• รูปภาพขนาดใหญ่หรือความละเอียดสูง (100 KB+) — ค่าใช้จ่ายของ Base64 และความล่าช้าในการ parse ส่งผลเสียต่อประสิทธิภาพ
• รูปภาพที่เปลี่ยนแปลงบ่อย — การทำให้แคชเบราว์เซอร์ของ payload HTML ขนาดใหญ่ใช้ไม่ได้เป็นการสิ้นเปลือง
• รูปภาพที่แชร์ข้ามหลายหน้า — ไฟล์ภายนอกได้ประโยชน์จากการแคชร่วมกันของเบราว์เซอร์
• รูปภาพที่ให้บริการผ่าน CDN — CDN ปรับการส่งไฟล์ให้เหมาะสมกว่าข้อมูลที่ฝังไว้

กฎทั่วไป 10 KB

แนวทางที่ถูกอ้างถึงอย่างกว้างขวาง: หากรูปภาพมีขนาดต่ำกว่า 10 KB ให้พิจารณาฝังเป็น Base64 หากใหญ่กว่านั้น ให้ให้บริการเป็นไฟล์แยกต่างหาก นี่เป็นการสร้างสมดุลระหว่างค่าใช้จ่ายของ HTTP requests กับค่าใช้จ่ายของข้อมูลที่เข้ารหัส Base64 ใน HTML ของคุณ

อย่างไรก็ตาม เกณฑ์ที่เหมาะสมขึ้นอยู่กับสถานการณ์เฉพาะของคุณ:

• HTTP/2 multiplexing ลดผลเสียของ requests หลายรายการ ทำให้ไฟล์ภายนอกน่าสนใจมากขึ้น
• บนการเชื่อมต่อที่ช้า การขจัด requests อาจมีคุณค่าแม้สำหรับรูปภาพที่ใหญ่กว่า
• สำหรับทรัพยากรใน critical rendering path ให้ฝังแม้แต่รูปภาพที่ใหญ่กว่าหากมันหมายถึงการเดินทางไป-กลับน้อยลงหนึ่งครั้ง

ข้อควรพิจารณาเกี่ยวกับการบีบอัด

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

แปลงรูปภาพของคุณเป็น Base64

พร้อมที่จะฝังรูปภาพโดยตรงในโค้ดของคุณหรือยัง? ใช้ เครื่องมือเข้ารหัสและถอดรหัส Base64 ออนไลน์ฟรี เพื่ออัปโหลดรูปภาพและรับ data URL ที่สมบูรณ์สำหรับ HTML, CSS และ JavaScript — ไม่ต้องติดตั้งใดๆ