ToolDeck

เครื่องมือเข้ารหัสรูปภาพ Base64

แปลงรูปภาพเป็น Base64 Data URI สำหรับ HTML และ CSS

วางรูปภาพที่นี่หรือคลิกเพื่ออัปโหลด

รองรับ PNG, JPG, SVG, WebP, GIF, AVIF

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

การเข้ารหัสรูปภาพ Base64 แปลงข้อมูลรูปภาพแบบไบนารีให้เป็นสตริง ASCII ที่สามารถฝังโดยตรงใน HTML, CSS หรือ JSON โดยไม่ต้องอ้างอิงไฟล์ภายนอก ผลลัพธ์คือ data URI — สตริงที่มีข้อมูลครบในตัวเอง ขึ้นต้นด้วย data:image/png;base64, ตามด้วยไบต์ของรูปภาพที่เข้ารหัสแบบ Base64 เบราว์เซอร์จัดการ data URI เหมือน URL รูปภาพภายนอกทุกประการ คือถอดรหัส Base64 แล้วแสดงรูปภาพแบบ inline

เทคนิคนี้ถูกกำหนดไว้ใน RFC 2397 (data URI scheme) และ RFC 4648 (Base64 encoding) เมื่อรูปภาพถูกเข้ารหัสแบบ Base64 ข้อมูลพิกเซลไบนารีทุก 3 ไบต์จะกลายเป็น 4 อักขระ ASCII ทำให้ขนาดข้อมูลเพิ่มขึ้นประมาณ 33% แม้จะมีค่าใช้จ่ายส่วนนี้ รูปภาพ inline ช่วยลด HTTP request ต่อ asset ได้ — ซึ่งเป็นการปรับแต่งที่มีนัยสำคัญเมื่อรูปภาพมีขนาดเล็ก (ไอคอน โลโก้ pixel ติดตาม 1x1) และ latency ของการ request แยกต่างหากมากกว่าต้นทุนของไบต์ที่เพิ่มขึ้น

Data URI ได้รับการรองรับในเบราว์เซอร์สมัยใหม่ทุกตัว ไคลเอนต์อีเมล (มีข้อจำกัดบางอย่าง) และบริบทใดก็ตามที่รองรับไวยากรณ์ URI มาตรฐาน ใช้งานกันอย่างแพร่หลายใน single-page application, HTML email template, SVG sprite และการประกาศ CSS background-image ที่การลดจำนวน network request ช่วยเพิ่มความเร็วในการโหลดที่รับรู้ได้

ทำไมต้องใช้เครื่องมือเข้ารหัสรูปภาพ Base64 นี้?

เครื่องมือนี้แปลงรูปภาพใดก็ได้เป็น data URI พร้อมใช้งานโดยตรงในเบราว์เซอร์ของคุณ — ไม่ต้องอัปโหลด ไม่ต้องใช้เซิร์ฟเวอร์ ไม่ต้องสมัครสมาชิก

แปลงได้ทันที
ลากและวางรูปภาพหรือเลือกไฟล์ แล้ว data URI ฉบับสมบูรณ์จะปรากฏขึ้นทันที ไม่ต้องรอการประมวลผลจากเซิร์ฟเวอร์ — FileReader API จัดการทุกอย่างในเครื่อง
🔒
ประมวลผลโดยคำนึงถึงความเป็นส่วนตัว
รูปภาพของคุณไม่เคยออกจากอุปกรณ์ของคุณ การเข้ารหัสทำงานทั้งหมดในเบราว์เซอร์โดยใช้เมธอด FileReader.readAsDataURL() แบบ native ไม่มีข้อมูลถูกส่งไปยังเซิร์ฟเวอร์ใดๆ
🌐
รองรับทุกรูปแบบหลัก
รองรับ PNG, JPEG, SVG, WebP, GIF, ICO, BMP และรูปแบบรูปภาพอื่นๆ ที่เบราว์เซอร์ของคุณรองรับ MIME type ถูกตรวจจับโดยอัตโนมัติจากไฟล์
📦
ผลลัพธ์พร้อมคัดลอก
ผลลัพธ์คือสตริง data URI ฉบับสมบูรณ์ — วางได้โดยตรงใน HTML img src, การประกาศ CSS url() หรือ JSON payload โดยไม่ต้องจัดรูปแบบเพิ่มเติม

กรณีการใช้งานการเข้ารหัสรูปภาพ Base64

การพัฒนา Frontend
ฝังไอคอนขนาดเล็กและ UI asset โดยตรงใน HTML หรือ CSS เพื่อลด HTTP request ช่วยลด latency แบบ waterfall สำหรับรูปภาพสำคัญที่อยู่เหนือส่วนที่มองเห็น ปรับปรุงคะแนน Largest Contentful Paint (LCP)
HTML Email Template
ไคลเอนต์อีเมลหลายตัวบล็อกรูปภาพภายนอกโดยค่าเริ่มต้น รูปภาพ Base64 แบบ inline แสดงผลทันทีโดยไม่ต้องให้ผู้รับคลิก "โหลดรูปภาพ" ช่วยเพิ่มอัตราการเปิดอ่านและความสม่ำเสมอของการแสดงผล
Single-Page Application
รวม asset ขนาดเล็กเป็น data URI ใน JavaScript หรือ CSS เพื่อลดจำนวน network request ทั้งหมด ทั้ง Webpack และ Vite รองรับการ inline Base64 อัตโนมัติสำหรับ asset ที่ต่ำกว่าขนาดที่กำหนดได้
API และ JSON Payload
เข้ารหัส avatar ผู้ใช้ ลายเซ็น หรือ thumbnail เป็นสตริง Base64 เพื่อรวมไว้โดยตรงใน JSON API response ช่วยหลีกเลี่ยงความจำเป็นในการมี endpoint โฮสต์ไฟล์แยกต่างหากสำหรับรูปภาพขนาดเล็ก
เอกสารและ Markdown
ฝังไดอะแกรมหรือภาพหน้าจอเป็น data URI ในไฟล์ Markdown หรือเอกสาร README รูปภาพเดินทางพร้อมกับเอกสารและแสดงผลได้อย่างถูกต้องโดยไม่ต้องโฮสต์ภายนอก
การทดสอบและการสร้างต้นแบบ
ใช้ Base64 data URI เป็นรูปภาพ placeholder ใน test fixture, Storybook story หรือไฟล์ HTML ต้นแบบ ไม่ต้องตั้ง static file server หรือจัดการ image asset ในช่วงพัฒนาเบื้องต้น

โครงสร้าง Data URI

data URI เข้ารหัสรูปแบบรูปภาพและเนื้อหาไบนารีในสตริงเดียว การเข้าใจโครงสร้างช่วยเมื่อสร้างหรือแยกวิเคราะห์ data URI โดยโปรแกรม:

ส่วนประกอบคำอธิบาย
data:URI scheme identifier
image/pngMIME type of the image
;base64,Encoding declaration
iVBORw0KGgo...Base64-encoded binary data

การเปรียบเทียบรูปแบบรูปภาพสำหรับการเข้ารหัส Base64

การเลือกรูปแบบรูปภาพส่งผลต่อขนาดผลลัพธ์ Base64 การรองรับของเบราว์เซอร์ และคุณลักษณะการแสดงผล เลือกรูปแบบที่เหมาะกับประเภทเนื้อหาของคุณ:

รูปแบบMIME Typeความโปร่งใสเหมาะสำหรับ
PNGimage/pngYesScreenshots, icons, UI elements
JPEGimage/jpegNoPhotos, gradients, large images
SVGimage/svg+xmlYesLogos, icons, scalable graphics
WebPimage/webpYesModern web images, smaller files
GIFimage/gifYes (1-bit)Simple animations, small icons
ICOimage/x-iconYesFavicons

ตัวอย่างโค้ด

วิธีแปลงรูปภาพเป็น Base64 data URI ในภาษาและสภาพแวดล้อมยอดนิยม:

JavaScript (browser)
// Convert a File object to a Base64 data URI
function fileToDataUri(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = () => resolve(reader.result)
    reader.onerror = reject
    reader.readAsDataURL(file)
    // reader.result → "data:image/png;base64,iVBORw0KGgo..."
  })
}

// Convert a canvas element to a data URI
const dataUri = canvas.toDataURL('image/png')
// → "data:image/png;base64,iVBORw0KGgo..."

// Convert with quality parameter (JPEG/WebP only)
const jpegUri = canvas.toDataURL('image/jpeg', 0.8)
// → "data:image/jpeg;base64,/9j/4AAQ..."
Python
import base64

# Read an image file and encode it to a data URI
with open('logo.png', 'rb') as f:
    encoded = base64.b64encode(f.read()).decode('ascii')

data_uri = f'data:image/png;base64,{encoded}'
# → "data:image/png;base64,iVBORw0KGgo..."

# Detect MIME type automatically
import mimetypes
mime, _ = mimetypes.guess_type('photo.jpg')
# mime → "image/jpeg"

with open('photo.jpg', 'rb') as f:
    b64 = base64.b64encode(f.read()).decode('ascii')

data_uri = f'data:{mime};base64,{b64}'
Node.js
import { readFileSync } from 'fs'
import { lookup } from 'mime-types'

// Read file and encode to data URI
const buffer = readFileSync('icon.png')
const base64 = buffer.toString('base64')
const mime = lookup('icon.png') // → "image/png"

const dataUri = `data:${mime};base64,${base64}`
// → "data:image/png;base64,iVBORw0KGgo..."

// From a Buffer received via HTTP/API
function bufferToDataUri(buf, mimeType) {
  return `data:${mimeType};base64,${buf.toString('base64')}`
}
CLI (bash)
# Encode an image to Base64 (macOS)
base64 -i logo.png | tr -d '\n'

# Encode an image to a full data URI (Linux)
echo -n "data:image/png;base64,$(base64 -w 0 logo.png)"

# Encode and copy to clipboard (macOS)
echo -n "data:image/png;base64,$(base64 -i logo.png | tr -d '\n')" | pbcopy

# Detect MIME type and encode (Linux, requires file command)
MIME=$(file -b --mime-type image.webp)
echo -n "data:$MIME;base64,$(base64 -w 0 image.webp)"

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

ขนาดรูปภาพสูงสุดสำหรับการเข้ารหัส Base64 คือเท่าไร?
ไม่มีขีดจำกัดที่ชัดเจนในข้อกำหนด Base64 การรองรับ data URI ของเบราว์เซอร์แตกต่างกัน: เบราว์เซอร์สมัยใหม่ส่วนใหญ่รองรับ data URI ได้หลายเมกะไบต์ อย่างไรก็ตาม การเข้ารหัส Base64 เพิ่มขนาด 33% ดังนั้นรูปภาพ 1 MB จะกลายเป็นข้อความประมาณ 1.33 MB สำหรับรูปภาพที่ใหญ่กว่า 10-20 KB การให้บริการเป็นไฟล์แยกต่างหากพร้อม cache ที่เหมาะสมมีประสิทธิภาพมากกว่า
การเข้ารหัส Base64 ลดคุณภาพรูปภาพหรือไม่?
ไม่ Base64 เป็นการเข้ารหัสแบบ lossless — แปลงข้อมูลไบนารีเป็นข้อความโดยไม่เปลี่ยนแปลงเนื้อหา ข้อมูลที่ถอดรหัสแล้วเหมือนกับไฟล์ต้นฉบับทุกไบต์ การสูญเสียคุณภาพใดๆ มาจากรูปแบบรูปภาพเอง (เช่น การบีบอัด JPEG) ไม่ใช่จากการเข้ารหัส Base64
ทำไมผลลัพธ์ที่เข้ารหัสแบบ Base64 ถึงใหญ่กว่ารูปภาพต้นฉบับ?
Base64 แสดงข้อมูลไบนารี 3 ไบต์โดยใช้ 4 อักขระ ASCII ส่งผลให้ขนาดเพิ่มขึ้น 33% data URI ยังมี prefix (เช่น data:image/png;base64,) ประมาณ 25-30 อักขระ สำหรับรูปภาพขนาดเล็ก (ต่ำกว่า 2-5 KB) ค่าใช้จ่ายส่วนนี้คุ้มค่าเพราะลด HTTP request ได้ สำหรับรูปภาพขนาดใหญ่กว่า ไฟล์ภายนอกมีประสิทธิภาพมากกว่า
ฉันสามารถใช้รูปภาพ Base64 ใน CSS background-image ได้หรือไม่?
ได้ ใช้ data URI เป็นค่าของฟังก์ชัน url(): background-image: url('data:image/png;base64,...') ใช้งานได้ในเบราว์เซอร์สมัยใหม่ทุกตัว มีประสิทธิภาพสูงสุดสำหรับ background pattern หรือไอคอนขนาดเล็กที่ใช้บ่อย ที่การหลีกเลี่ยง HTTP request คุ้มค่ากับไฟล์ CSS ที่ใหญ่ขึ้นเล็กน้อย
การเข้ารหัสรูปภาพ Base64 ปลอดภัยสำหรับรูปภาพที่มีความลับหรือไม่?
Base64 เป็นการเข้ารหัส ไม่ใช่การเข้ารหัสลับ ใครก็ตามที่เห็น data URI สามารถถอดรหัสกลับเป็นรูปภาพต้นฉบับได้ อย่าพึ่งพา Base64 เพื่อปกป้องรูปภาพที่เป็นความลับ เครื่องมือนี้ประมวลผลรูปภาพในเบราว์เซอร์ของคุณทั้งหมด — ไม่มีข้อมูลถูกส่งไปยังเซิร์ฟเวอร์ใดๆ — แต่ data URI ที่ได้เป็นข้อความธรรมดาที่ใครก็ตามที่เข้าถึงซอร์สโค้ด HTML หรือ CSS ของคุณสามารถอ่านได้
ฉันจะแปลง Base64 data URI กลับเป็นไฟล์รูปภาพได้อย่างไร?
ใน JavaScript ใช้ fetch() กับ data URI แล้วเรียก blob() บน response จากนั้นสร้างลิงก์ดาวน์โหลด ใน Python แยกสตริงที่เครื่องหมายจุลภาค ถอดรหัสส่วน Base64 ด้วย base64.b64decode() แล้วเขียนไบต์ลงไฟล์ คุณยังสามารถใช้เครื่องมือ Base64 Image Decoder บนเว็บไซต์นี้ได้
ฉันควรเข้ารหัสรูปภาพทั้งหมดบนเว็บไซต์ของฉันแบบ Base64 หรือไม่?
ไม่ควร การ inline Base64 มีประโยชน์สำหรับรูปภาพขนาดเล็ก (ไอคอน โลโก้ pixel 1x1) ที่ค่าใช้จ่าย HTTP request มากกว่าค่าเพิ่ม 33% ของขนาด สำหรับรูปภาพขนาดใหญ่กว่า ให้ใช้ไฟล์แยกต่างหากพร้อม cache header ที่เหมาะสม — เบราว์เซอร์สามารถ cache แยกต่างหากและโหลดแบบขนานได้ ขนาดที่นิยมใช้เป็นเกณฑ์คือ 2-8 KB: รูปภาพที่ต่ำกว่าขนาดนี้ได้ประโยชน์จาก inline ส่วนรูปภาพที่ใหญ่กว่าควรให้บริการเป็นไฟล์ภายนอก