เครื่องมือเข้ารหัสรูปภาพ 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 พร้อมใช้งานโดยตรงในเบราว์เซอร์ของคุณ — ไม่ต้องอัปโหลด ไม่ต้องใช้เซิร์ฟเวอร์ ไม่ต้องสมัครสมาชิก
กรณีการใช้งานการเข้ารหัสรูปภาพ Base64
โครงสร้าง Data URI
data URI เข้ารหัสรูปแบบรูปภาพและเนื้อหาไบนารีในสตริงเดียว การเข้าใจโครงสร้างช่วยเมื่อสร้างหรือแยกวิเคราะห์ data URI โดยโปรแกรม:
| ส่วนประกอบ | คำอธิบาย |
|---|---|
| data: | URI scheme identifier |
| image/png | MIME type of the image |
| ;base64, | Encoding declaration |
| iVBORw0KGgo... | Base64-encoded binary data |
การเปรียบเทียบรูปแบบรูปภาพสำหรับการเข้ารหัส Base64
การเลือกรูปแบบรูปภาพส่งผลต่อขนาดผลลัพธ์ Base64 การรองรับของเบราว์เซอร์ และคุณลักษณะการแสดงผล เลือกรูปแบบที่เหมาะกับประเภทเนื้อหาของคุณ:
| รูปแบบ | MIME Type | ความโปร่งใส | เหมาะสำหรับ |
|---|---|---|---|
| PNG | image/png | Yes | Screenshots, icons, UI elements |
| JPEG | image/jpeg | No | Photos, gradients, large images |
| SVG | image/svg+xml | Yes | Logos, icons, scalable graphics |
| WebP | image/webp | Yes | Modern web images, smaller files |
| GIF | image/gif | Yes (1-bit) | Simple animations, small icons |
| ICO | image/x-icon | Yes | Favicons |
ตัวอย่างโค้ด
วิธีแปลงรูปภาพเป็น Base64 data URI ในภาษาและสภาพแวดล้อมยอดนิยม:
// 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..."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}'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')}`
}# 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)"