Konverter Gambar ke Base64

Apa Itu Gambar Base64 (Data URI)?

<!-- The same 1×1 transparent PNG, four ways -->

<!-- HTML -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==" alt="pixel">

/* CSS */
.badge {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==");
}

<!-- Markdown -->
![pixel](data:image/png;base64,iVBORw0KGgo…)

// JSON
{ "mime": "image/png", "data": "iVBORw0KGgo…" }

Fitur Utama

Contoh

transparent-1x1.png  (PNG 68 byte)

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

icon.svg

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0i…" alt="icon">

photo.jpg  (12 KB)

![photo](data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ…)

Cara Mengonversi Gambar ke Base64

1. 1

   Tambahkan gambar Anda

   Seret gambar ke zona lepas, klik untuk menjelajah, atau tempel dari clipboard dengan Ctrl+V / Cmd+V. PNG, JPG, GIF, WebP, SVG, ICO, dan BMP semuanya didukung dan di-encode sepenuhnya di browser Anda.

2. 2

   Pilih format output

   Pilih Data URI, Base64 mentah, HTML , background CSS, Markdown, atau JSON dari tab. Periksa bilah metadata untuk peningkatan ukuran dan lencana saran untuk menilai apakah inlining sepadan.

3. 3

   Salin atau unduh

   Klik Salin untuk mengambil cuplikan, atau Unduh untuk menyimpannya sebagai file. Untuk membalik prosesnya, beralihlah ke tab Base64 → Gambar, tempel sebuah string, dan unduh gambar yang direkonstruksi.

Kesalahan Umum

data:base64,iVBORw0KGgo…
<!-- no MIME type — will not render -->

data:image/png;base64,iVBORw0KGgo…
<!-- correct: image/png -->

data:image/png;base64,iVBORw0KGgoAAAANS
UhEUgAAAAEAAAABCAYAAAA…
<!-- embedded newline breaks the attribute -->

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAA…
<!-- single unbroken line -->

…WjR9awAAAABJRU5ErkJggg
<!-- missing trailing == -->

…WjR9awAAAABJRU5ErkJggg==
<!-- complete with padding -->

/* 380 KB hero photo inlined into a global stylesheet */
.hero { background-image: url("data:image/jpeg;base64,/9j/…(½ MB of text)…"); }

/* Serve it as a cached file instead */
.hero { background-image: url("/img/hero.jpg"); }

Kasus Penggunaan Umum

Menyematkan logo atau ikon inline di CSS

Lepaskan ikon PNG atau SVG kecil, salin cuplikan background-image CSS, dan tempel ke stylesheet Anda untuk menghapus satu request HTTP bagi aset yang jarang berubah. Jaga di bawah ~2 KB (perhatikan lencana hijau) agar stylesheet tetap ramping.

Menyematkan gambar di email HTML

Klien email sering memblokir gambar jarak jauh. Encode logo Anda sebagai data URI dan tempel elemen ke template sehingga dirender tanpa pengambilan server. Uji di berbagai klien — jaga sematan tetap ikon kecil, bukan foto.

Markdown dan README mandiri

Ketika Anda tidak dapat meng-host gambar — isu GitHub, notebook, dokumen offline — output Markdown menyematkan gambar langsung di file sehingga ikut bersama teks. Ideal untuk diagram kecil dan lencana.

Gambar di dalam JSON atau payload API

Perlu mengirim thumbnail di dalam dokumen JSON atau file konfigurasi? Output JSON memberi Anda objek { mime, data } yang dapat ditempel langsung, dan decoder memulihkan gambar di sisi lain.

Debugging data URI cepat

Menemukan data: URI misterius di stylesheet atau respons API? Tempel ke tab Base64 → Gambar untuk melihat apa isinya sebenarnya, baca dimensi aslinya, dan unduh sebagai file biasa untuk inspeksi lebih dekat.

Widget dan bookmarklet satu file

Bookmarklet dan widget yang dapat disematkan harus mandiri tanpa dependensi eksternal. Meng-inline ikonnya sebagai Base64 menjaga semuanya dalam satu file yang bekerja di mana pun ia dijatuhkan.

Detail Teknis

Cara Kerja Encoding Base64

Base64 mengambil aliran biner gambar tiga byte (24 bit) sekaligus dan membaginya menjadi empat grup 6-bit, masing-masing dipetakan ke satu karakter dalam alfabet 64-simbol. Ketika panjang input bukan kelipatan tiga, satu atau dua karakter padding = menandai sisanya. Rasio 3-ke-4 inilah alasan teks ter-encode sekitar 33% lebih besar dari sumbernya. Alat ini menghitung panjang byte yang didekode langsung dari panjang string dan padding, sehingga angka ukuran yang dilaporkannya tepat, bukan perkiraan.

Deteksi MIME dan Magic Byte

Saat Anda meng-encode file, tipe MIME-nya berasal dari objek File browser. Saat Anda mendekode string Base64 mentah tanpa prefiks data:, alat ini memeriksa karakter awal, yang berkorespondensi dengan magic byte gambar: iVBORw0KGgo untuk PNG, /9j/ untuk JPEG, R0lGOD untuk GIF, UklGR untuk WebP, dan PHN2Zy atau PD94bWw untuk SVG. Ini memungkinkan decoder merekonstruksi data URI yang benar dan mengunduh dengan ekstensi file yang tepat bahkan ketika input hanya payload telanjang.

Pemrosesan Hanya Lokal

Encoding menggunakan readAsDataURL dari FileReader API, yang mengembalikan data URI yang disintesis sepenuhnya di browser. Decoding untuk unduhan menggunakan atob ditambah Uint8Array untuk membangun ulang biner, lalu Blob dan object URL — sekali lagi tanpa jaringan yang terlibat. Hasilnya adalah alat yang dapat Anda jalankan offline dan percayai dengan gambar rahasia, karena byte tidak pernah meninggalkan halaman. Anda dapat memverifikasi perilaku nol-request di developer tools browser Anda.

Praktik Terbaik

Inline Hanya Aset Kecil yang Stabil

Titik manis untuk Base64 adalah aset di bawah ~2 KB yang jarang berubah dan muncul di sedikit halaman — ikon, logo kecil, sprite UI. Di atas ~10 KB, penalti ukuran dan caching yang hilang melebihi request yang dihemat, terutama sekarang HTTP/2 membuat request tambahan murah. Biarkan lencana saran memandu Anda, dan sajikan foto serta grafik besar sebagai file biasa yang di-cache.

Lebih Baik URL-Encoding untuk SVG

SVG adalah teks, jadi Base64 menggembungkannya tanpa keuntungan. Saat meng-inline SVG di CSS atau HTML, URL-encode markup-nya — biasanya lebih kecil, tetap terbaca manusia, dan terkompresi lebih baik dengan gzip/brotli. Sediakan Base64 SVG untuk pipeline yang secara khusus membutuhkannya. URL Encoder/Decoder kami menangani percent-encoding-nya.

Selalu Setel Tipe MIME yang Benar

Data URI hanya dirender jika tipe MIME-nya cocok dengan kontennya: image/png, image/jpeg, image/gif, image/webp, image/svg+xml. Tipe yang salah atau hilang adalah alasan nomor satu gambar tersemat gagal tampil. Saat Anda menyalin dari alat ini, tipenya disetel untuk Anda; jika Anda menyusun URI secara manual, periksa ulang prefiksnya.

Kompres Sebelum Meng-encode

Karena Base64 menambah ~33% di atas ukuran file, memperkecil sumbernya dahulu menguntungkan dua kali. Jalankan gambar melalui Kompresor Gambar kami — atau ekspor pada dimensi yang tepat — sebelum encoding, sehingga data URI yang dihasilkan sekecil mungkin. PNG terkompres 4 KB mengalahkan aslinya 40 KB baik sebagai file maupun inline.

Jangan Pernah Andalkan Base64 untuk Privasi

Base64 mudah sekali dibalik dan tidak memberikan perlindungan. Jangan gunakan untuk mengaburkan konten gambar sensitif — siapa pun dapat mendekodenya secara instan, termasuk dengan tab di halaman ini. Jika konten harus dilindungi, gunakan kontrol akses dan enkripsi nyata di server, dan sajikan gambar melalui endpoint yang terotentikasi.

Pertanyaan yang Sering Diajukan

Apa yang dilakukan konverter Gambar ke Base64 ini?

Alat ini membaca gambar yang Anda letakkan, tempel, atau pilih dan meng-encode byte-nya sebagai string Base64 — sepenuhnya di dalam browser Anda. Anda mendapat Base64 mentah, data URI siap pakai (data:image/png;base64,…), dan cuplikan salin-tempel untuk HTML , CSS background-image, Markdown, dan JSON. Bilah metadata melaporkan ukuran file asli, ukuran ter-encode, persentase peningkatan yang tepat (Base64 sekitar 33% lebih besar), dimensi piksel, dan tipe MIME. Tidak ada yang diunggah: encoding berjalan secara lokal melalui FileReader API, sehingga alat ini aman untuk tangkapan layar, aset internal, dan karya yang belum dirilis. Untuk arah sebaliknya, gunakan tab Base64 → Gambar atau decoder Base64 ke Gambar kami.

Apakah gambar saya diunggah ke server?

Tidak. Setiap langkah terjadi di sisi klien dalam browser Anda menggunakan FileReader API dan encoding string JavaScript. Gambar Anda tidak pernah ditransmisikan, tidak pernah disimpan, dan tidak pernah dicatat. Anda dapat memastikannya dengan membuka tab Network di browser Anda — meng-encode gambar memicu nol request jaringan. Ini menjadikan alat ini aman untuk materi sensitif: tangkapan layar produk sebelum peluncuran, diagram internal, aset pelanggan, dan apa pun di bawah NDA. Tidak ada batas ukuran file yang dipaksakan oleh batas upload, hanya batas praktis seberapa besar string Base64 yang dapat ditangani browser dan sistem target Anda dengan nyaman.

Seberapa besar Base64 membuat sebuah gambar?

Base64 meng-encode setiap 3 byte data biner menjadi 4 karakter ASCII, sehingga string ter-encode kira-kira 33% lebih besar dari file asli (ditambah beberapa byte padding dan prefiks data:). PNG 9 KB menjadi sekitar 12 KB teks. Overhead ini adalah alasan terpenting untuk tidak meng-Base64 gambar besar: Anda mengirim lebih banyak byte dan, karena string tersemat di HTML atau CSS Anda, byte tersebut diunduh ulang setiap kali file penampung berubah dan tidak dapat di-cache secara independen. Alat ini menampilkan peningkatan yang tepat untuk file spesifik Anda di bilah metadata sehingga Anda dapat memutuskan dengan angka nyata.

Kapan saya harus menggunakan gambar Base64 alih-alih file biasa?

Base64 (sebagai data URI) cocok untuk aset kecil yang jarang berubah, ketika menghindari request HTTP terpisah lebih penting daripada caching: ikon dan logo kecil yang disematkan inline di CSS, gambar yang disematkan di email HTML (banyak klien memblokir gambar eksternal tetapi merender data URI), widget atau bookmarklet satu file yang harus mandiri, sprite SVG, dan gambar yang disimpan di dalam payload JSON/API. Aturan praktis: di bawah sekitar 2 KB dan dipakai di satu atau dua halaman, inlining biasanya menang. Lencana saran di alat ini meng-encode persis heuristik itu — hijau di bawah 2 KB, kuning hingga 10 KB, merah di atasnya.

Kapan saya TIDAK boleh menggunakan gambar Base64?

Hindari Base64 untuk apa pun yang besar atau dipakai ulang di banyak halaman. Empat alasan konkret: (1) peningkatan ukuran ~33% berarti lebih banyak byte melalui jaringan; (2) gambar inline tidak dapat di-cache sendiri — diunduh ulang setiap kali HTML atau CSS yang memuatnya berubah, dan diulang di setiap halaman yang menyematkannya; (3) mendekode data URI besar memakan CPU dan baterai, yang terasa di perangkat seluler; dan (4) Anda kehilangan gambar responsif (srcset/sizes) dan lazy-loading. Karena HTTP/2 memultipleks banyak request kecil dengan murah, alasan asli untuk inlining — memangkas jumlah request — jarang berlaku lagi. Untuk foto, gambar hero, atau apa pun di atas ~10 KB, file biasa yang di-cache hampir selalu memuat lebih cepat. Jika tujuannya file yang lebih kecil, jalankan melalui Kompresor Gambar kami terlebih dahulu.

Bagaimana cara menggunakan output Base64 di HTML dan CSS?

Untuk HTML, beralihlah ke tab HTML dan tempel elemen yang dihasilkan: . Untuk CSS, gunakan tab CSS, yang membungkus data URI dalam background-image: url("data:image/png;base64,…"). Keduanya bekerja di mana pun URL diterima — img src, background CSS, mask-image, bahkan tag link favicon. Skema data: didukung oleh setiap browser modern. Satu peringatan: data URI yang sangat panjang dalam HTML inline dapat menurunkan keterbacaan dan, dalam CSS, menggembungkan stylesheet yang dikirim ke setiap pengunjung, jadi sediakan inlining hanya untuk aset yang benar-benar kecil.

Format gambar apa saja yang didukung?

PNG, JPEG/JPG, GIF (termasuk animasi), WebP, SVG, ICO, dan BMP semuanya didukung, ditambah AVIF jika browser dapat mendekodenya. Karena alat ini meng-encode byte mentah alih-alih merender ulang gambar, GIF animasi tetap beranimasi, PNG transparan menjaga channel alfanya, dan SVG tetap sepenuhnya skalabel. Tipe MIME dibaca dari file itu sendiri dan, ketika Anda menempel Base64 mentah ke decoder, disimpulkan dari magic byte data. Tidak ada konversi format selama encoding — output merepresentasikan persis file yang Anda berikan.

Mengapa SVG adalah kasus khusus?

SVG adalah teks XML, bukan biner, sehingga Base64 justru membuatnya lebih besar dan lebih sulit dibaca tanpa manfaat apa pun. Untuk menyematkan SVG inline di CSS atau HTML, URL-encoding markup (percent-encoding beberapa karakter seperti #, <, >, dan tanda kutip) biasanya lebih kecil daripada Base64 dan menjaga sumbernya tetap terbaca serta ramah gzip. Alat ini tetap menawarkan output Base64 SVG karena beberapa pipeline membutuhkannya, tetapi jika Anda mengoptimalkan CSS secara manual, lebih baik gunakan data URI yang di-URL-encode. URL Encoder/Decoder kami membantu pendekatan itu.

Apakah Base64 sama dengan enkripsi?

Tidak. Base64 adalah encoding, bukan enkripsi — ia sepenuhnya dapat dibalik oleh siapa pun tanpa memerlukan kunci. Ia ada untuk merepresentasikan data biner menggunakan set karakter ASCII yang dapat dicetak dengan aman agar data bertahan melalui sistem yang hanya menangani teks (HTML, JSON, header email, URL). Siapa pun dapat mendekode string Base64 kembali ke gambar asli dalam hitungan detik, termasuk dengan tab Base64 → Gambar di sini. Jangan pernah memperlakukan Base64 sebagai cara menyembunyikan atau melindungi konten gambar sensitif; ia tidak memberikan kerahasiaan sama sekali.

Bisakah saya menyematkan gambar Base64 di email?

Ya, dan ini salah satu pemanfaatan teknik yang lebih baik. Banyak klien email memblokir gambar yang di-host secara eksternal secara default demi privasi, yang merusak tata letak yang mengandalkan logo jarak jauh. Menyematkan gambar kecil sebagai data URI memastikannya langsung dirender tanpa pengambilan server. Trade-off-nya: beberapa klien lama (terutama versi Outlook tertentu) memiliki dukungan data URI yang tidak konsisten, dan sematan besar menggembungkan ukuran pesan yang diunduh setiap penerima. Jaga gambar tersemat tetap kecil — logo dan ikon, bukan foto — dan uji di seluruh klien target Anda.

Mengapa gambar Base64 saya tidak tampil?

Penyebab paling umum: tipe MIME yang hilang atau salah di prefiks data: (gunakan image/png untuk PNG, image/jpeg untuk JPG, image/svg+xml untuk SVG), spasi atau jeda baris yang tidak sengaja masuk ke dalam string, salinan terpotong yang menghilangkan padding di akhir (= atau ==), atau menempel hanya Base64 mentah tanpa prefiks data:…;base64, ketika sebuah URL diharapkan. Decoder di alat ini toleran — ia membuang spasi, menerima input dengan atau tanpa prefiks, dan menyimpulkan MIME dari magic byte gambar — jadi menempel string Anda ke tab Base64 → Gambar adalah cara tercepat untuk memastikan apakah datanya sendiri valid.