Base64 Image Encoder

Apa Itu Enkoding Gambar Base64?

Enkoding gambar Base64 mengubah data gambar biner menjadi string ASCII yang dapat disematkan langsung di HTML, CSS, atau JSON tanpa mereferensikan file eksternal. Hasilnya adalah data URI — string mandiri yang dimulai dengan data:image/png;base64, diikuti oleh byte gambar yang telah dienkode Base64. Browser memperlakukan data URI persis seperti URL gambar eksternal: mereka mendekode payload Base64 dan merender gambar secara inline.

Teknik ini didefinisikan oleh RFC 2397 (skema data URI) dan RFC 4648 (enkoding Base64). Ketika gambar dienkode Base64, setiap 3 byte data piksel biner menjadi 4 karakter ASCII, sehingga ukuran payload bertambah sekitar 33%. Meski ada overhead ini, gambar inline menghilangkan satu permintaan HTTP per aset — optimasi yang berarti ketika gambar berukuran kecil (ikon, logo, piksel pelacak 1x1) dan latensi bolak-balik dari permintaan terpisah melebihi biaya byte tambahan.

Data URI didukung oleh semua browser modern, klien email (dengan beberapa catatan), dan konteks apa pun yang menerima sintaks URI standar. Teknik ini banyak digunakan dalam aplikasi single-page, template email HTML, sprite SVG, dan deklarasi CSS background-image di mana pengurangan jumlah total permintaan jaringan meningkatkan waktu muat yang dirasakan pengguna.

Mengapa Menggunakan Base64 Image Encoder Ini?

Alat ini mengubah gambar apa pun menjadi data URI siap pakai langsung di browser Anda — tanpa unggahan, tanpa server, tanpa akun.

Kasus Penggunaan Enkoding Gambar Base64

Struktur Data URI

Data URI mengenkode format gambar dan konten biner dalam satu string. Memahami strukturnya membantu saat membangun atau mengurai data URI secara programatik:

Perbandingan Format Gambar untuk Enkoding Base64

Pilihan format gambar memengaruhi ukuran output Base64, dukungan browser, dan karakteristik rendering. Gunakan format yang paling sesuai dengan jenis konten Anda:

Contoh Kode

Cara mengubah gambar ke data URI Base64 dalam berbagai bahasa dan lingkungan populer:

// 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)"

Pertanyaan yang Sering Diajukan