Monu Tools

Gambar ke Base64

Konversi gambar menjadi data URI Base64 untuk disematkan dalam HTML, CSS, atau JSON, sepenuhnya di peramban Anda.

Cara menggunakan Gambar ke Base64

  1. 01

    Pilih gambar dari perangkat Anda.

  2. 02

    Salin data URI, atau cuplikan CSS yang sudah jadi.

  3. 03

    Tempel ke HTML, CSS, atau JSON Anda.

Apa yang dilakukan konverter ini

Konverter gambar ke Base64 ini mengubah gambar menjadi data URI, yaitu string teks panjang yang menyematkan gambar secara langsung, ditambah cuplikan latar belakang CSS yang siap pakai. Anda dapat menyisipkan gambar secara inline alih-alih menautkan ke berkas terpisah.

Alat ini berjalan secara lokal di browser Anda, sehingga gambar Anda dibaca di perangkat Anda dan tidak pernah diunggah.

Mengapa menyisipkan gambar secara inline

Data URI membawa seluruh gambar di dalam markup, sehingga browser tidak membuat permintaan jaringan terpisah untuk mengambilnya. Untuk aset kecil seperti ikon, penghematan perjalanan bolak-balik itu dapat membuat halaman terasa lebih cepat.

Konsekuensinya: ukuran dan caching

Masalahnya adalah ukuran dan caching. Base64 menambah overhead sekitar 33 persen karena merepresentasikan data biner dengan alfabet teks yang terbatas, dan gambar yang disisipkan secara inline tidak dapat di-cache secara terpisah, sehingga diunduh lagi bersama setiap halaman yang memuatnya.

Aturan praktisnya adalah menyisipkan gambar kecil secara inline, ikon, logo mungil, atau sprite, di mana menghindari permintaan sepadan dengan overhead-nya, dan menjaga gambar yang lebih besar sebagai berkas normal yang dapat di-cache dan dimuat browser secara paralel.

Di mana data URI berfungsi

Data URI berfungsi di mana pun URL diterima: src sebuah img, latar belakang CSS, atau field dalam JSON atau template email. Itu membuatnya berguna untuk cuplikan yang mandiri.

Pertanyaan yang sering diajukan

Apakah gambar saya diunggah ke server?

Tidak. Gambar dibaca sepenuhnya di peramban Anda, jadi ia tidak pernah keluar dari perangkat.

Kapan saya sebaiknya memakai data URI?

Untuk gambar kecil seperti ikon, di mana menghindari permintaan jaringan tambahan sepadan dengan kenaikan ukuran. Untuk gambar besar, berkas biasa lebih baik.

Mengapa Base64 lebih besar dari berkasnya?

Encoding Base64 menambah overhead sekitar 33 persen karena ia merepresentasikan data biner menggunakan alfabet teks yang terbatas.

Sumber

Sematkan tool ini

Tambahkan tool ini ke situs web Anda sendiri. Salin cuplikan di bawah; cuplikan ini tetap terbarui secara otomatis.

<iframe src="https://monu.tools/embed/id/image-to-base64" width="100%" height="640" style="border:1px solid #e5e5e5;border-radius:12px;max-width:680px" loading="lazy" title="Monu Tools"></iframe>

Alat terkait