Gunakan Konverter Gambar ke Data URI / Base64

Ukuran file maksimum: 20 MB
Letakkan gambar Anda di sini
atau klik untuk melihat-lihat
Lihat gambar
JPG, PNG, GIF, WebP, BMP, SVG, AVIF
Tips: Data URI mencakup awalan MIME; sedangkan Base64 saja merupakan muatan mentah.
Tautan Alat
Telah disalin ke papan klip.
Bantu Perbaiki Alat Ini
2.38K
Waktu yang Digunakan
1.83K
Jumlah Pengguna
5+ tahun
Disajikan
Terakhir ditinjau pada 4 hari yang lalu. Angka penggunaan diperbarui selama audit berkala. (Laporan sejak 21 Feb 2022)
Laporkan ketidaksesuaian

Baca Isi

Pelajari cara kerja alat ini dan kapan harus menggunakannya.

Konversi beberapa file gambar Anda ke format Data URI dan Base64 secara online dan gratis. 

Konverter Gambar ke Data URI / Base64

Konverter gambar ke Data URI / Base64 adalah alat praktis yang memungkinkan Anda mengubah gambar menjadi rangkaian teks dengan cepat dan mudah, yang dapat digunakan dalam halaman web atau aplikasi online lainnya. Jenis konverter ini berguna ketika Anda perlu menyematkan gambar ke dalam kode tetapi tidak ingin menggunakan layanan hosting file eksternal.


 

Apa itu Sistem Enkode Gambar ke Base64

Pernahkah Anda perlu mengonversi gambar menjadi data URL atau string Base64?

Gambar ke Base64 adalah sistem pengkodean gambar yang mengubah gambar apa pun menjadi format teks yang tidak dapat dibaca tanpa kehilangan data. Teks yang dihasilkan dengan enkode Base64 berisi tanda plus, garis miring, tanda sama dengan, huruf Latin, dan angka.

Enkode Base64 adalah cara yang sangat berguna untuk menyimpan informasi biner dalam format teks. Tujuannya adalah untuk merepresentasikan data biner (seperti gambar, suara, klip video) menggunakan karakter ASCII (huruf dari alfabet + angka).

Mengapa Menggunakan Data URI / Base64?

Gambar dapat diubah menjadi string Base64 menggunakan metode yang disebut data URI. Ini memungkinkan kita membuat URL untuk gambar yang kemudian dapat disertakan dalam halaman web. Prosesnya melibatkan pengubahan file asli menjadi array byte (kumpulan byte). Kemudian kita dapat mengenkode array byte tersebut menjadi string yang dienkode Base64.

Data URI menawarkan beberapa keuntungan dibandingkan file lokal. Mereka menghemat ruang dalam cache klien (peramban), berukuran lebih kecil daripada gambar biasa, dan memungkinkan situs web untuk menyajikan gambar yang lebih besar dengan penggunaan bandwidth yang lebih sedikit. String Base64 juga lebih mudah dibaca karena dapat dilihat dengan mudah menggunakan editor teks umum.

Dengan Data URI, Anda dapat menyematkan gambar langsung ke dalam kode HTML Anda tanpa harus memuat file eksternal. Ini dapat mempercepat waktu pemuatan halaman Anda, dan sebenarnya cukup mudah dilakukan. Dalam artikel ini, kami akan menunjukkan cara mengonversi gambar ke Data URI dalam hitungan detik.

Cara Mengonversi Gambar ke Base64 / Data URI dalam Hitungan Detik

Pernahkah Anda bertanya-tanya bagaimana cara membuat gambar memuat lebih cepat di situs web Anda? Salah satu caranya adalah dengan menggunakan Data URI. Cukup seret & lepas atau unggah gambar secara manual dari perangkat Anda atau dengan menempelkan URL gambar dari web untuk mengonversi gambar target Anda ke format teks Base64 / Data URI.

Contoh Enkode Gambar ke Base64

Hasil Enkode Base64 untuk sebuah gambar seperti data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2OTApLC....

Penggunaan Enkode Gambar ke Base64

Untuk Sumber Gambar (img src):

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2OTApLC..." />

Untuk URL Gambar Latar Belakang (background-image: url):

background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2OTApLC...")

Cara Menggunakan Data URI / Base64

Untuk menggunakan konverter Data URI / Base64, cukup salin dan tempel kode yang dihasilkan ke dalam proyek Anda di tempat Anda ingin gambar tersemat muncul. Pastikan untuk tidak menghapus jeda baris atau spasi dalam kode karena diperlukan untuk format tampilan yang benar. Anda mungkin juga perlu menyesuaikan beberapa pengaturan tergantung pada bagaimana Anda berencana menggunakan gambar yang dikonversi - seperti mengubah dimensi atau menambahkan batas/jarak di sekitarnya.

Komentar (0)

Untuk diskusi pengguna, kasus-kasus khusus, dan tips lanjutan.
Tinggalkan komentar
Komentar Anda akan ditampilkan secara publik setelah dikirim.
Belum ada komentar. Jadilah yang pertama memberikan komentar!
Beritahu Kami!
Laporkan masalah terkait alat ini

Jelaskan masalah yang Anda alami agar kami dapat menyelidikinya dan meningkatkan alat ini.

Apa yang paling membantu
Sertakan data masukan, hasil yang diharapkan, hasil yang sebenarnya, browser/perangkat, serta tangkapan layar jika diperlukan.
Tombol tangkapan layar akan mengambil gambar halaman di peramban dan melampirkan gambar yang dihasilkan ke formulir ini.
Tangkapan layar satu halaman penuh
Direkam di peramban Anda menggunakan newisty.
Belum ada tangkapan layar yang diambil.
Alat Laporan