MUTools

Enkode / Dekode

Konversi Gambar ⇄ Base64

Alat Konversi Gambar ⇄ Base64 memungkinkan Anda mengubah berkas gambar menjadi string Base64 (Data URL), atau memulihkan gambar dari string Base64 untuk dipratinjau dan diunduh. Alat ini berguna saat Anda ingin menyematkan ikon secara inline ke dalam HTML atau CSS, maupun saat ingin memeriksa isi Data URL yang terdapat dalam respons API.

Mode konversi

Seret & lepas gambar ke sini

atau

Mendukung PNG / JPG / WebP / GIF / SVG / AVIF / ICO. Maksimal 10 berkas per sesi, hingga 10 MB per berkas.

Tambahkan gambar untuk menampilkan hasil konversi di sini.

Semua gambar dan teks diproses sepenuhnya di dalam browser Anda dan tidak dikirim ke server eksternal.

Apa itu alat Konversi Gambar ⇄ Base64?

Alat Konversi Gambar ⇄ Base64 memungkinkan Anda mengubah berkas gambar menjadi string Base64 (Data URL), atau memulihkan gambar dari string Base64 untuk dipratinjau dan diunduh. Alat ini berguna saat Anda ingin menyematkan ikon secara inline ke dalam HTML atau CSS, maupun saat ingin memeriksa isi Data URL yang terdapat dalam respons API.

Pada mode "Gambar → Base64", Anda dapat memuat beberapa berkas berformat PNG / JPG / WebP / GIF / SVG / AVIF / ICO sekaligus dengan seret & lepas. Untuk setiap gambar yang dimuat, ditampilkan pratinjau kecil beserta jumlah byte asli dan jumlah byte setelah dikonversi ke Base64. Selain Data URL, Anda dapat menyalin tiga format cuplikan kode melalui tab: untuk background-image CSS, untuk tag <img> HTML, dan untuk notasi gambar Markdown. Anda juga dapat menyimpan Data URL dari semua berkas ke dalam satu berkas teks.

Pada mode "Base64 → Gambar", Anda dapat menempelkan baik Data URL berformat data:image/...;base64,xxx maupun string Base64 murni tanpa prefiks. Format gambar dideteksi otomatis dari magic number pada byte awal, lalu pratinjau ditampilkan dan dapat diunduh. Jika tidak terdeteksi atau ingin menimpa, Anda dapat memilih format secara manual melalui menu dropdown. Campuran spasi, baris baru, dan karakter URL-safe (- _) juga dinormalisasi secara otomatis.

Semua gambar dan teks yang Anda masukkan diproses sepenuhnya di dalam browser Anda dan tidak dikirim ke server eksternal. Jadi, Anda dapat dengan tenang memeriksa gambar rahasia perusahaan maupun data yang mengandung informasi pribadi. Berjalan sepenuhnya di browser Anda.

Cara penggunaan

  1. Pilih "Gambar → Base64" atau "Base64 → Gambar" pada "Mode konversi" di bagian atas.
  2. Gambar → Base64: seret & lepas gambar ke dropzone, atau muat beberapa sekaligus melalui "Pilih berkas".
  3. Tekan "Salin" pada setiap kartu untuk menyalin Data URL, atau salin format yang diinginkan dari tab CSS / HTML / Markdown.
  4. Dengan "Unduh semua sebagai .txt", Anda dapat menyimpan seluruh Data URL yang telah dimuat sebagai satu berkas teks.
  5. Base64 → Gambar: tempelkan Data URL atau string Base64 polos ke dalam kolom teks.
  6. Jika deteksi otomatis meleset, timpa format gambar melalui dropdown "Format" di kanan atas, lalu simpan dengan "Unduh gambar".

Skenario penggunaan

  • Saat ingin menyematkan ikon atau SVG kecil secara inline ke dalam HTML / CSS untuk mengurangi jumlah permintaan HTTP.
  • Saat ingin membuat Data URL secara langsung dan memverifikasinya ketika menyematkan gambar sebagai data URI pada `background-image` CSS.
  • Saat ingin memvisualisasikan dan mengunduh isi `data:image/...;base64,...` yang terdapat dalam respons API atau sumber HTML.
  • Saat ingin membuat sampel email HTML dengan gambar yang disematkan secara inline.
  • Saat ingin mengonversi gambar ke Base64 untuk fixture pengujian atau snapshot E2E saat pengembangan, lalu menyertakannya dalam pengelolaan sumber kode.

Hal yang perlu diperhatikan

  • Anda dapat memuat maksimal 10 berkas per sesi, dengan ukuran maksimal 10 MB per berkas. Gambar yang melebihi batas ini akan ditolak saat dimuat.
  • Mengonversi gambar ke Base64 akan menambah ukuran menjadi sekitar 1,33 kali jumlah byte aslinya. Data URL bukanlah format kompresi sederhana, melainkan pengkodean untuk merepresentasikan byte sebagai teks.
  • Menyematkan Data URL berukuran lebih dari 100 KB secara inline ke `background-image` CSS tidak disarankan karena cache browser menjadi tidak berfungsi. Peringatan akan ditampilkan pada kartu yang berukuran besar.
  • Pada "Base64 → Gambar", format gambar (PNG / JPG / WebP / GIF / AVIF / ICO) dideteksi otomatis dari byte awal setelah decode. SVG dideteksi dari tag pada awal teks.
  • Spasi dan baris baru pada string yang ditempelkan dihapus otomatis, dan karakter "-" "_" yang digunakan pada Base64 URL-safe dikonversi ke format standar sebelum decode. Penghilangan padding "=" di akhir juga didukung.
  • Jika tidak dapat dideteksi, tidak valid sebagai Base64, atau melebihi 50 MB setelah decode, pesan kesalahan akan ditampilkan di kolom hasil.

Pertanyaan yang sering diajukan

Apakah gambar dikirim ke server?
Tidak dikirim. Seluruh proses konversi berlangsung sepenuhnya di dalam browser Anda. Jadi, Anda dapat dengan tenang memeriksa gambar rahasia perusahaan maupun data yang mengandung informasi pribadi.
Bagaimana ukuran gambar setelah dijadikan Base64?
Jumlah teks akan bertambah menjadi sekitar 1,33 kali jumlah byte aslinya. Sebagai gantinya, jumlah permintaan HTTP dapat dikurangi, tetapi perhatikan bahwa cache browser menjadi tidak berfungsi. Untuk gambar besar, sebaiknya tetap gunakan referensi URL biasa.
Seberapa besar gambar yang dapat dikonversi?
Patokannya adalah maksimal 10 MB per berkas. Gambar yang lebih besar akan ditolak karena jumlah teksnya membengkak sehingga membuat kinerja browser menjadi berat.
Apakah Base64 tanpa prefiks "data:image/..." juga dapat di-decode?
Bisa. Karena format gambar dideteksi otomatis dari magic number pada byte awal setelah decode, menempelkan string Base64 murni saja pun tetap berfungsi. Jika tidak dapat dideteksi, tentukan format secara manual melalui dropdown.
Apakah SVG juga didukung?
Didukung. Pada "Gambar → Base64", berkas SVG dapat dimuat langsung, dan pada "Base64 → Gambar", SVG dapat dipulihkan baik dari Data URL maupun Base64 polos (SVG dideteksi ketika awal teks adalah `<?xml` atau `<svg`).
Apakah PNG transparan kembali utuh?
Ya. Karena Base64 adalah pengkodean yang setia terhadap byte, channel alfa maupun informasi warna tidak akan rusak. Berkas yang dipulihkan identik dengan PNG asli hingga tingkat bit.