Konverter dan Decoder Gambar ke Base64

Base64 adalah cara menulis data biner, seperti file gambar, hanya dengan 64 karakter teks yang aman: huruf, angka, tanda plus, dan garis miring. Setiap tiga byte file menjadi empat karakter teks. Dengan begitu konten biner bisa melewati sistem yang hanya menangani teks, seperti JSON, atribut HTML, file CSS, dan sebagian format email.

Data URI membungkus teks itu dengan header singkat yang memberi tahu browser isinya, misalnya data:image/png;base64, diikuti file yang sudah di-encode. Browser bisa menampilkannya persis seperti tautan gambar biasa.

Kapan perlu disematkan

Saat menimbang Base64 vs tautan file gambar, komprominya ada di ukuran dan cache. Teks Base64 sekitar sepertiga lebih besar dari file asli, dan tidak bisa di-cache terpisah oleh browser. File biasa diunduh sekali lalu dipakai ulang. Base64 unggul untuk gambar yang sangat kecil, saat menghemat satu request lebih penting daripada beberapa ratus byte.

Tambahkan gambar di tab Gambar ke Base64. Alat ini membacanya secara lokal, mendeteksi jenis aslinya dari byte file, dan menampilkan ukuran asli, ukuran hasil encode, dan kenaikannya. Di bawahnya ada lima cuplikan siap pakai dengan tombol salin. String yang sangat panjang dipersingkat di kotak demi kecepatan, tapi tombol salin selalu menyalin teks lengkapnya.

Anda juga bisa mengunduh data URI sebagai file teks, praktis untuk string yang sangat besar atau saat perlu mengirimnya ke rekan kerja.

Format umum

PNG ke Base64 adalah kasus paling umum, karena ikon dan logo biasanya file PNG transparan. JPG ke Base64 bekerja dengan cara yang sama dan cocok untuk foto kecil seperti avatar. File SVG juga bisa di-encode; untuk SVG, teks URL-encoded biasa bisa lebih kecil lagi, tapi Base64 adalah opsi yang paling kompatibel.

Di HTML

Untuk memakai gambar Base64 di HTML, tempel cuplikan img ke halaman Anda. Cuplikan itu sudah berisi alt text dari nama file serta width dan height, yang membantu mencegah tata letak bergeser. Edit alt text agar menggambarkan gambar untuk pembaca layar.

Di CSS

Untuk gambar latar Base64 di CSS, tempel aturan background-image ke stylesheet. Cocok untuk pola dan ikon kecil. Biarkan foto besar tetap sebagai file, karena menyematkannya membuat seluruh stylesheet lebih lambat diunduh dan diproses.

Markdown dan JSON

Cuplikan Markdown berfungsi di banyak editor dan alat dokumentasi yang menerima data URI. Untuk API dan JSON, pakai cuplikan Base64 saja, tanpa header data:, kecuali dokumentasi API meminta data URI lengkap.

Beralih ke tab Base64 ke gambar dan tempel string Base64 mentah atau data URI lengkap. Alat ini menghapus spasi dan baris baru, menerima karakter URL-safe, menambahkan padding yang hilang, men-decode teks, dan mengecek byte pertama untuk mengenali jenis gambar aslinya. Anda lalu melihat gambarnya, dimensi dan ukurannya, serta tombol unduh dengan ekstensi file yang benar.

Jika teks bukan Base64 yang valid, terpotong, atau berisi jenis file lain, pesan yang jelas menjelaskan masalahnya. Ini membuat decoder berguna untuk debugging respons API, kolom database, dan kode sumber email.

Patokannya, sematkan gambar yang lebih kecil dari beberapa kilobyte dan biarkan sisanya sebagai file. Alat ini memperingatkan saat gambar lebih dari 100 KB, karena menyematkannya akan membuat HTML atau CSS berat. Untuk gambar lebih besar, kompres dulu dengan alat kompres gambar kami atau ubah ke WebP.

Base64 adalah encoding, bukan enkripsi. Siapa pun bisa men-decode-nya, jadi jangan pernah menganggapnya sebagai cara menyembunyikan atau melindungi gambar.

Privasi

Encode dan decode terjadi sepenuhnya di browser dengan fungsi bawaan. Tidak ada yang diunggah atau disimpan, dan alat ini gratis, tanpa batas, serta tidak memakai kredit EnhancerPro.

Kenapa string saya panjang sekali?

Setiap tiga byte menjadi empat karakter, jadi gambar 30 KB menjadi sekitar 40.000 karakter. Itu wajar. Jika terlalu panjang untuk kebutuhan Anda, perkecil dimensi gambar atau kompres sebelum di-encode.

Baris baru dan email

Sebagian sistem email memecah Base64 menjadi baris 76 karakter. Decoder otomatis mengabaikan baris baru itu, jadi Anda bisa langsung menempel teks yang terpecah.

Favicon dan ikon

Menyematkan favicon sebagai data URI berfungsi di sebagian besar browser, tapi favicon.ico dan file PNG sungguhan lebih andal untuk bookmark dan layar utama. Pembuat favicon kami membuat set lengkapnya.

Logo di tanda tangan email

Sebagian aplikasi email memblokir gambar bertaut sampai pembaca mengizinkannya, tapi dukungan untuk data URI tersemat juga berbeda-beda. Untuk tanda tangan, PNG kecil bertaut yang di-hosting di situs Anda biasanya pilihan paling andal, dan Base64 jadi cadangan untuk sistem yang mewajibkan semuanya dalam satu blok HTML. Apa pun pilihannya, jaga logo di bawah beberapa kilobyte.

Placeholder dan gambar saat memuat

Versi mungil dan blur dari foto yang di-encode sebagai Base64 bisa langsung muncul selagi gambar penuh dimuat. Perkecil gambar hingga sekitar 20 piksel lebarnya, encode, lalu pakai sebagai latar di balik gambar asli. Hanya menambah beberapa ratus byte ke halaman.

Menyimpan gambar di JSON

Sebagian API dan file konfigurasi menerima gambar sebagai string Base64. Pakai cuplikan Base64 saja dan cek dokumentasi untuk batas ukurannya. Saat menerima data seperti itu, tempel ke decoder untuk memastikan jenis dan dimensi gambar sebelum menyimpannya.

Pengujian dan prototipe

Saat membagikan prototipe cepat sebagai satu file HTML, menyematkan gambar kecil berarti tidak ada yang rusak saat file dipindah atau dikirim lewat email. Untuk apa pun yang masuk produksi, ganti lagi gambar tersemat yang besar dengan file biasa agar browser bisa men-cache-nya.

Mengecek isi sebuah string

Teks Base64 tidak memberi petunjuk tentang isinya. Karakter pertama sering mengisyaratkan jenisnya, seperti iVBOR untuk PNG atau /9j/ untuk JPEG, tapi decoder adalah cara yang andal untuk tahu. Decoder membaca tanda tangan file yang asli, bukan percaya pada label di data URI.

Daftar cek performa

Sebelum menyematkan gambar, ajukan tiga pertanyaan. Apakah kecil, idealnya di bawah beberapa kilobyte? Apakah hanya dipakai di satu halaman, sehingga cache tidak banyak membantu? Apakah satu request tambahan akan memperlambat tampilan pertama secara terasa? Jika jawaban ketiganya ya, Base64 cocok. Jika tidak, sajikan file biasa dalam format modern seperti WebP, atur width dan height-nya, dan biarkan browser men-cache-nya untuk setiap halaman yang memakainya. Dengan begitu HTML tetap ramping dan halaman tetap cepat.

Konversi bolak-balik

Meng-encode lalu men-decode gambar memberi byte yang persis sama; Base64 bersifat lossless. Karena itu decoder adalah cara cepat memastikan string yang Anda salin lengkap. Jika gambar hasil decode terpotong atau tidak tampil, sebagian teks hilang saat disalin, sering di bagian akhir tempat karakter padding berada. Salin lagi dari sumbernya lalu decode sekali lagi. Alat ini akan memastikan saat teksnya utuh.