🔐
← Kembali ke Panduan

Cara Mengonversi Gambar ke Data URL Base64

· Tag: image-to-base64, base64, data-url, image-embedding, web-performance, html, css

Apa Itu Data URL Gambar Base64?

Data URL gambar Base64 menyematkan seluruh file gambar langsung dalam dokumen web sebagai string teks, menghilangkan kebutuhan akan permintaan HTTP terpisah untuk memuat gambar. Alih-alih browser mengambil file eksternal, data gambar sudah ada dalam HTML atau CSS.

Formatnya terlihat seperti ini:

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

Rinciannya:

  • data: — prefiks skema data URI
  • image/png — tipe MIME dari gambar yang disematkan
  • ;base64 — menunjukkan encoding Base64
  • ,iVBORw0... — data gambar yang di-encode Base64 sebenarnya

Mengapa Mengonversi Gambar ke Base64?

Menyematkan gambar sebagai Base64 berguna dalam beberapa skenario:

Mengurangi Permintaan HTTP

Setiap file gambar eksternal memerlukan permintaan HTTP terpisah. Data URL Base64 menghilangkan permintaan ini, yang dapat meningkatkan waktu muat halaman — terutama pada koneksi latensi tinggi atau untuk halaman dengan banyak aset kecil.

Dokumen Mandiri

Gambar Base64 membuat file HTML Anda sepenuhnya portabel. Template email dengan gambar Base64 tetap berfungsi bahkan ketika klien email penerima memblokir sumber daya eksternal. Demikian pula, dokumen HTML dengan gambar tersemat dapat dibagikan sebagai satu file tanpa khawatir tentang jalur gambar yang rusak.

Halaman Kritis Kinerja

Untuk gambar hero above-the-fold dan elemen UI kritis, menghilangkan round trip tambahan dapat meningkatkan metrik seperti Largest Contentful Paint (LCP). Namun, ini hanya menguntungkan gambar kecil — untuk gambar besar, inline justru kontraproduktif.

Bekerja Offline

Ketika gambar disematkan sebagai data URL, gambar tersebut berfungsi tanpa akses jaringan. Ini berharga untuk aplikasi web offline dan progressive web apps (PWA).

Cara Mengonversi Gambar ke Base64

Metode 1: Menggunakan Alat Online (Termudah)

Cara tercepat untuk mengonversi gambar ke Base64 adalah menggunakan alat online khusus. Unggah atau seret dan lepas gambar Anda ke encoder Base64 online gratis kami, dan Anda akan mendapatkan data URL lengkap yang siap ditempel ke kode Anda.

Metode 2: Menggunakan JavaScript di Browser

API FileReader menyediakan cara langsung untuk mengonversi gambar yang dipilih pengguna ke 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...
});

Metode 3: Menggunakan Canvas API

Jika Anda perlu mengubah ukuran, memotong, atau mengompresi gambar sebelum mengonversinya ke Base64, Canvas API adalah pilihan yang tepat:

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);
}

Metode 4: Menggunakan Node.js

Di sisi server, gunakan modul fs dengan Buffer untuk mengonversi file gambar ke 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);

Metode 5: Menggunakan Command Line

Di Linux dan macOS, Anda dapat menggunakan perintah base64 bawaan:

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

Cara Menggunakan Gambar Base64 di HTML

Langsung di tag <img>:

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

Cara Menggunakan Gambar Base64 di CSS

Sebagai gambar latar belakang:

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

Pertimbangan Kinerja dan Praktik Terbaik

Kapan Gambar Base64 Membantu

  • Ikon kecil dan elemen UI di bawah 10 KB
  • Gambar above-the-fold kritis yang memblokir rendering
  • Sprite dan ikon SVG yang digunakan di seluruh halaman
  • Template email di mana gambar eksternal sering diblokir
  • Aplikasi web offline-first dan dokumen mandiri

Kapan Gambar Base64 Merugikan

  • Foto besar atau gambar resolusi tinggi (100 KB+) — overhead Base64 dan penundaan parsing merugikan kinerja
  • Gambar yang sering berubah — membatalkan cache browser untuk payload HTML besar adalah pemborosan
  • Gambar yang dibagikan di banyak halaman — file eksternal mendapat manfaat dari cache browser bersama
  • Gambar yang disajikan CDN — CDN mengoptimalkan pengiriman file lebih baik daripada data inline

Aturan Praktis 10 KB

Pedoman yang banyak dikutip: jika gambar berukuran di bawah 10 KB, pertimbangkan untuk meng-inline sebagai Base64. Jika lebih besar, sajikan sebagai file terpisah. Ini menyeimbangkan overhead permintaan HTTP dengan overhead data yang di-encode Base64 di HTML Anda.

Namun, ambang optimal tergantung pada situasi spesifik Anda:

  • Multiplexing HTTP/2 mengurangi penalti banyak permintaan, membuat file eksternal lebih menarik
  • Pada koneksi lambat, menghilangkan permintaan bisa berharga bahkan untuk gambar yang lebih besar
  • Untuk sumber daya critical rendering path, inline bahkan gambar yang lebih besar jika itu berarti satu round trip lebih sedikit

Pertimbangan Kompresi

Jika Anda mengonversi gambar JPEG atau PNG ke Base64, pertimbangkan menggunakan WebP. WebP menyediakan kompresi superior pada tingkat kualitas yang sama, menghasilkan string Base64 yang lebih kecil. Banyak alat online memungkinkan Anda meng-encode ulang gambar sebelum mengonversinya ke Base64.

Konversi Gambar Anda ke Base64

Siap menyematkan gambar langsung di kode Anda? Gunakan encoder dan decoder Base64 online gratis kami untuk mengunggah gambar dan mendapatkan data URL lengkap untuk HTML, CSS, dan JavaScript — tanpa perlu instalasi.