Generator Data URI
Ubah file atau teks apa pun menjadi data URI dengan tipe MIME yang tepat, dalam Base64 atau percent-encoding, plus cuplikan <img> dan CSS background siap pakai. Lokal.
Apa itu Generator Data URI?
Data URI menyematkan file langsung di dalam HTML, CSS, atau JSON sebagai data:<mime>;base64,<data>, sehingga tidak perlu permintaan terpisah. Alat ini mengubah file apa pun (gambar, font, SVG, PDF…) atau teks yang diketik menjadi data URI, mendeteksi tipe MIME, memungkinkan Anda memilih Base64 atau percent-encoding, dan memberi cuplikan HTML dan CSS yang sesuai.
Cara menggunakan Generator Data URI
- Pilih File lalu letakkan file, atau pilih Teks dan ketik kontennya.
- Periksa atau ubah Tipe MIME.
- Biarkan Encoding Base64 (matikan untuk percent-encoding teks dan SVG) aktif untuk file biner; matikan untuk melakukan percent-encoding pada teks dan SVG (sering kali lebih kecil).
- Salin Data URI atau cuplikan HTML / CSS.
Contoh
Text: Hello, World! (Base64 on)
data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==
Kapan menggunakan Generator Data URI
Pakai data URI untuk aset kecil: ikon, SVG mungil, gambar placeholder, font pada demo satu file atau template email, dan fixture uji. Hindari untuk file yang lebih besar dari beberapa kilobyte di situs web: Base64 menambah sekitar 33% pada ukuran dan data yang disematkan tidak dapat di-cache terpisah dari halaman atau stylesheet.
Cara kerja Generator Data URI
File dibaca sebagai byte di browser. Tipe MIME berasal dari browser atau ekstensi file. Dengan Base64, byte dikodekan dengan alfabet standar (RFC 4648) dan ditulis sebagai data:<mime>;base64,… (RFC 2397). Tanpa Base64, konten didekode sebagai UTF-8 dan di-escape dengan encodeURIComponent, dan ;charset=utf-8 ditambahkan untuk tipe teks. Pratinjau ditampilkan untuk gambar, dan ukuran hasilnya ditampilkan.
Kasus Penggunaan Umum
- Menyematkan ikon SVG kecil di background-image CSS
- Menyematkan gambar dalam laporan HTML satu file
- Menaruh gambar mungil ke fixture API JSON
- Membuat gambar tanda tangan email yang berdiri sendiri
Pertanyaan Umum
Mengapa data URI lebih besar dari file saya?
Base64 mengodekan setiap 3 byte menjadi 4 karakter, sehingga hasilnya sekitar 33% lebih besar. Percent-encoding pada teks atau SVG sering kali lebih kecil.
Apakah file saya diunggah?
Tidak. File dibaca dan dikodekan sepenuhnya di browser Anda.
Berapa batas ukurannya?
Alat ini menerima file hingga 20 MB, tetapi browser dan klien email menangani data URI besar dengan buruk; jaga tetap kecil.