Konverter Gambar ke Base64

Ubah gambar menjadi teks yang bisa ditempel, lalu ubah teks itu kembali menjadi gambar

Konverter Gambar Base64 adalah alat yang mengubah file gambar seperti PNG, JPG, GIF, WebP, dan SVG menjadi teks berbentuk data:image/png;base64,… (Data URL), dan sebaliknya menerima teks Base64 lalu mengembalikannya menjadi gambar asli. Jika Anda memasukkan gambar di kolom kiri area kerja di atas, Base64 muncul di kolom kanan; jika Anda menempel Base64 di kolom kanan, gambarnya muncul di kolom kiri. Anda tidak perlu memilih mode.

Hasilnya dapat langsung disalin dalam lima bentuk: Data URL, Base64 saja, HTML <img>, CSS background-image, dan Markdown. Skala ukuran di bawahnya menunjukkan seberapa besar gambar bertambah setelah menjadi teks, dan apakah alat build seperti Vite atau webpack menyematkan ukuran itu secara otomatis pada pengaturan bawaan. File tidak diunggah ke server dan hanya dibaca di dalam browser ini.

Dalam situasi apa alat ini dipakai?

Base64 adalah cara menulis ulang file yang terdiri dari 0 dan 1 hanya dengan 64 karakter. Jika gambar diubah menjadi teks, gambar dapat dimasukkan juga ke tempat yang hanya menerima teks.

• Menyematkan ikon kecil langsung di CSS atau HTML: dipakai untuk menghindari satu permintaan file tambahan hanya demi satu ikon. Alat build mengubah gambar kecil menjadi Data URL secara otomatis dengan alasan yang sama.
• Membuat dokumen yang selesai dalam satu file: untuk laporan, lembar panduan, atau demo offline, gambar dimasukkan ke dalam teks agar tidak rusak walaupun hanya satu file HTML yang dikirim.
• Mengirim gambar lewat JSON atau API: JSON hanya dapat memuat teks, sehingga gambar diubah menjadi teks Base64 dan ditaruh dalam satu entri. Saat penerima ingin memeriksa gambar apa yang tersimpan, nilainya dikembalikan menjadi gambar.
• Memeriksa Base64 yang tertinggal di log atau basis data: jika Anda menemukan teks panjang yang diawali iVBORw0KGgo… di catatan galat atau basis data, cukup tempelkan untuk melihat gambar apa itu.

Cara memakai konverter

1. Tekan Pilih gambar, atau seret gambar ke area kerja. Gambar yang sudah disalin dimasukkan dengan Ctrl+V (⌘+V di Mac) atau tombol Tempel. Anda dapat memasukkan hingga 20 gambar sekaligus, dan menekan nomor di bawah untuk melihatnya satu per satu.
2. Di tombol format kanan atas, pilih bentuk yang sesuai dengan tempat Anda akan menempel. Untuk SVG, Anda dapat memilih Enkode URL atau Base64, dan jumlah karakter ditampilkan di setiap tombol.
3. Tekan Salin atau Simpan. Jika Anda memasukkan beberapa gambar, tombol Salin semua muncul, dan jika Anda memilih CSS, satu kelas dibuat untuk setiap gambar dengan nama file sebagai nama kelasnya.
4. Untuk mengembalikan ke gambar, tempel Base64 atau alamat data: di kolom kanan. Walaupun Anda menempel seluruh teks HTML atau CSS, alamat data: di dalamnya dicari dan dibaca, dan gambar yang dikembalikan dapat diunduh dengan Simpan gambar.

Ikon, foto, dan logo yang terlihat di layar awal adalah file contoh. Pada contoh foto, koordinat di dekat Balai Kota Seoul sengaja dimasukkan sebagai lokasi pengambilan. Jika Anda menekan contoh foto, Anda dapat melihat bagaimana peringatan lokasi muncul di kolom info foto.

Bentuk hasil dan tempat menempelnya

Pada bentuk HTML, lebar dan tinggi asli gambar dimasukkan sebagai width dan height. Browser dapat menyisakan ruangnya sebelum gambar dibaca, sehingga tampilan tidak bergeser. Karena alt berisi nama file, sebaiknya Anda menggantinya dengan kalimat yang menjelaskan isi gambar.

Mengapa ukuran bertambah sekitar sepertiga setelah menjadi Base64

File komputer tersusun dari satuan 8 bit (1 byte), sedangkan satu karakter Base64 hanya mewakili 6 bit. Karena itu RFC 4648 menetapkan bahwa 3 byte (24 bit) dibagi menjadi empat potongan 6 bit dan ditulis sebagai 4 karakter. Pita bit di area kerja di atas menunjukkan proses ini dengan 6 byte pertama dari file. Jika kelompok terakhir kurang dari 3 byte, sisa bit diisi 0 dan posisi karakter yang kosong ditulis dengan =.

Jumlah karakter Base64 = 4 × ⌈byte asli ÷ 3⌉ · Jumlah karakter Data URL = nilai di atas + awalan (data:image/png;base64,, 22 karakter)

Namun server web umumnya mengompresi teks dengan metode seperti gzip sebelum mengirimnya. Base64 hanya memakai 64 jenis simbol, sehingga setelah dikompresi, bagian yang bertambah hampir hilang. Batang Transfer gzip pada skala ukuran adalah nilai yang diukur dengan benar-benar mengompresi hasil saat ini memakai fitur kompresi bawaan browser (CompressionStream). Tabel di bawah ini adalah hasil pengukuran tiga file contoh di Chrome. Program kompresi berbeda di tiap browser, sehingga selisih beberapa byte bisa terjadi.

Artinya, jika dikirim dalam keadaan terkompresi, Base64 dari PNG dan JPG sampai dengan ukuran yang hampir sama dengan file aslinya. Meski begitu, gambar yang disematkan sebagai Base64 ikut terunduh setiap kali dokumen itu diterima, dan browser tidak dapat menyimpan file gambarnya secara terpisah untuk dipakai ulang. Karena itu, cara ini umumnya hanya dipakai untuk gambar kecil.

Sampai ukuran berapa sebaiknya dijadikan Data URL?

Tidak ada aturan pasti, tetapi nilai bawaan alat build yang banyak dipakai menjadi patokan yang realistis. Tanda pada skala ukuran membandingkan ukuran file asli dengan kedua nilai bawaan ini.

• Kurang dari 4.096 byte: kedua alat menyematkannya sebagai Data URL pada pengaturan bawaan. Gambar yang tidak dipakai berkali-kali, seperti ikon atau pola kecil, termasuk di sini.
• 4.096 ~ 8.096 byte: rentang tempat penilaian kedua alat berbeda. Ikon contoh (6.960 byte) termasuk di sini; untuk file yang sama, Vite membiarkannya sebagai file, sedangkan webpack menyematkannya sebagai teks.
• Lebih dari 8.096 byte: kedua alat membiarkannya sebagai file terpisah. Gambar besar seperti foto lebih baik tetap menjadi file agar browser dapat menyimpannya terpisah dan memakainya ulang.

Pada situs yang memakai Content Security Policy (CSP), data: harus ditulis terpisah di img-src agar gambar Data URL tampil. CSP Level 3 menetapkan bahwa skema alamat selain http dan https harus dituliskan secara eksplisit.

Untuk SVG, enkode URL sering kali lebih pendek daripada Base64

SVG pada dasarnya adalah gambar berbentuk teks, jadi tidak perlu ditulis ulang sebagai Base64. Chris Coyier dari CSS-Tricks merangkum bahwa saat SVG disematkan sebagai Data URL, Base64 membuat ukurannya sekitar 133~136% dari aslinya, dan memakai teks apa adanya lebih baik dikompresi. Alat ini menghitung jumlah karakter dari kedua cara saat SVG dimasukkan, lalu memilih yang lebih pendek terlebih dahulu.

• Enkode URL mengubah #, <, >, %, baris baru, dan karakter non-ASCII menjadi penulisan persen (misalnya %23). Terutama jika # dibiarkan apa adanya, bagian setelah nilai warna terpotong sebagai fragmen alamat dan gambar rusak.
• Tanda kutip ganda yang membungkus nilai atribut diganti dengan tanda kutip tunggal. Dengan begitu, hasilnya dapat langsung dimasukkan ke dalam src="…" pada HTML atau url("…") pada CSS. Jika nilai atribut sudah mengandung tanda kutip tunggal, tanda itu tidak diganti dan dibiarkan sebagai %22.
• Spasi, =, :, dan / dibiarkan apa adanya. Di dalam atribut HTML yang dibungkus tanda kutip dan di dalam alamat CSS, browser membaca karakter ini apa adanya. Pada bentuk Markdown, jika ada spasi, alamat dibungkus dengan <…>.

Saat mengembalikan Base64 menjadi gambar

Sebagian besar format file diawali byte tertentu. Karena itu, beberapa karakter pertama Base64 saja sudah cukup untuk menebak formatnya. Walaupun awalan data:image/… tidak ada, alat ini mengenali format dari bagian awal byte yang dikembalikan, dan memberi tahu Anda jika format yang tertulis di awalan berbeda dari isi sebenarnya.

Teks yang ditempel sering kali tercampur hal-hal yang tidak diperlukan. Alat ini memperbaiki kasus berikut secara otomatis saat membaca, dan menuliskan apa yang diperbaiki di bawah kolom gambar.

• Baris baru dan spasi: email (MIME) menetapkan agar Base64 dipotong menjadi baris berisi paling banyak 76 karakter, sehingga jika disalin dari sumber email, baris baru ikut terbawa.
• Base64 URL-safe: cara yang memakai - dan _ sebagai pengganti + dan / agar dapat dimasukkan ke dalam alamat (RFC 4648 §5). Karakter itu diganti ke karakter standar saat dibaca.
• Padding yang hilang: pada nilai yang = di ujungnya dihilangkan, tanda itu ditambahkan sesuai jumlah karakter. = yang berubah menjadi penulisan persen seperti %3D juga diuraikan.
• Alamat data: di dalam teks: walaupun Anda menempel seluruh teks HTML <img>, CSS url(), atau Markdown, alamat data: pertama dicari dan dibaca, lalu Anda diberi tahu berapa jumlah yang ada.

Sebaliknya, kasus ketika jumlah karakter dibagi 4 bersisa 1 tidak dapat diperbaiki. Base64 memuat 3 byte untuk setiap 4 karakter, sehingga sisa 1 karakter hanya muncul jika bagian ujung terpotong saat disalin.

Kesalahan yang sering terjadi

• Mengira Base64 adalah enkripsi: Base64 adalah cara penulisan yang dapat dikembalikan oleh siapa saja. Jangan memakainya untuk menyembunyikan kata sandi atau data pribadi.
• Mengira Base64 adalah kompresi: Base64 justru membuat ukuran bertambah sekitar sepertiga. Jika ingin memperkecil file, perkecil dulu dengan kompresi gambar atau konversi ke WebP, baru ubah.
• Mengira info foto ikut terhapus: Base64 memindahkan byte apa adanya, sehingga lokasi pengambilan dan info perangkat di dalam Exif tetap ada. Alat ini menampilkan di kolom info foto apakah JPEG, PNG, dan WebP memuat Exif dan info lokasi.
• Menempel Data URL di bilah alamat: browser saat ini memblokir navigasi ke alamat data: lewat bilah alamat demi keamanan. Untuk memeriksa isinya, tempel di kolom kanan alat ini.
• Menulis image/jpg: nama format standar JPEG adalah image/jpeg. Jika awalan berisi image/jpg saat dikembalikan, Anda diberi tahu, dan menekan tombol format menulis ulang dengan nama standar.

Batasan dan hal yang perlu diperhatikan

• Satu file dapat berukuran hingga 10 MB (10.485.760 byte), dengan 20 file sekaligus. Jika hasilnya melebihi 400.000 karakter, kolom teks hanya menampilkan bagian awal dan akhir, sedangkan salin dan simpan memakai teks lengkap. KB dan MB di layar memakai satuan 1.024 byte.
• Alat ini tidak mengunduh gambar dari alamat gambar (URL). Simpan gambarnya terlebih dahulu, lalu masukkan.
• Foto HEIC dapat dikonversi, tetapi pratinjaunya hanya tampil di Safari 17 ke atas pada macOS dan iOS. TIFF dan JPEG XL juga mungkin tidak dapat dipratinjau tergantung browser.
• Ukuran tidak diperkecil dan format tidak diubah; byte dipindahkan apa adanya. GIF dan WebP animasi tetap bergerak walaupun dikembalikan.
• Batang transfer gzip adalah nilai dari mengompresi hasil ini secara terpisah. Pada halaman sesungguhnya, hasilnya dikompresi bersama teks di sekitarnya sehingga angkanya bisa sedikit berbeda, dan di browser tanpa fitur kompresi batang ini tidak ditampilkan.
• Menurut batas browser, Chromium dan Firefox menerima alamat data: hingga 512MB, sedangkan Safari hingga 2048MB. Batas 10 MB alat ini jauh lebih kecil dari itu, tetapi sudah merupakan ukuran besar untuk dimasukkan ke dokumen sungguhan.

Tanggal acuan Spesifikasi Base64 dan data:, nilai bawaan Vite dan webpack, batas panjang di browser, serta dukungan fitur kompresi diperiksa pada sumber aslinya pada 2026-10-20. Nilai bawaan alat build dapat berubah jika versinya berganti.

Sumber

• 01RFC 4648: The Base16, Base32, and Base64 Data Encodings24 bit menjadi 4 karakter (§4), padding = (§3.2), karakter di luar alfabet (§3.3), base64url yang URL-safe (§5)
• 02RFC 2397: The "data" URL schemeSintaks URL data: tipe media opsional, penanda ;base64 opsional, koma, lalu data
• 03MDN: data: URLstext/plain jika format dihilangkan, batas panjang (Chromium dan Firefox 512MB, Safari 2048MB), navigasi tingkat atas diblokir
• 04Vite: Build Options — build.assetsInlineLimitNilai bawaan 4096 (4 KiB), aset yang lebih kecil disematkan sebagai URL Base64
• 05webpack: Module — parser.dataUrlConditionNilai bawaan maxSize 8096 byte, ukuran ini atau lebih kecil disematkan
• 06webpack: Asset ModulesTipe asset memperlakukan file yang lebih kecil dari 8kb sebagai inline
• 07CSS-Tricks: Probably Don't Base64 SVG (2014-10-21)SVG menjadi 133~136% jika di-Base64, teks apa adanya lebih menguntungkan untuk kompresi
• 08W3C: Content Security Policy Level 3§1.3 Skema selain http dan https harus dicantumkan secara eksplisit di kebijakan
• 09RFC 2045: MIME Part One§6.8 Baris Base64 paling banyak 76 karakter
• 10MDN: CompressionStreamKompresi gzip bawaan browser, didukung browser utama sejak Mei 2023
• 11Can I use: HEIF/HEIC image formatHanya tampil di Safari 17 ke atas (macOS dan iOS)

Pertanyaan yang sering diajukan

Alat yang dipakai bersama