Pengembang / Pengodean

Generator Data URI

Ubah file apa pun menjadi data URI dengan potongan CSS dan HTML yang siap ditempel, opsi URL yang lebih kecil untuk SVG, serta ukuran tambahan file setelah dikodekan.

Generator Data URI: Data URI (RFC 2397) menempatkan isi file langsung ke dalam link atau stylesheet, sehingga tidak memerlukan request terpisah. Encoding Base64 mengubah setiap 3 byte menjadi 4 karakter, sehingga ukuran file bertambah sekitar sepertiga. Karena SVG berupa teks, file ini dapat dikodekan dengan persen, yang hanya melakukan escape pada karakter seperti %, #, <, dan >, sehingga biasanya menghasilkan ukuran yang lebih kecil. Berjalan 100% lokal di browser Anda tanpa upload file ke server.

Kategori
Tools developer
Dijalankan
Di browser Anda
Biaya
Gratis · tanpa daftar
Ketersediaan
Siap digunakan
Generator Data URIPemrosesan lokal

Berjalan sepenuhnya di browser Anda

File dibaca di browser Anda dan tidak pernah di-upload.

Tempat data URI dapat digunakan

Data URI dapat digunakan di img src, CSS url(), link href untuk ikon, dan link download. Browser memblokir halaman agar tidak membuka data URI sebagai halaman tingkat atas, dan Content Security Policy yang ketat harus mengizinkan data: untuk gambar atau style yang menggunakannya.

Untuk encode teks, bukan file, gunakan Base64 encoder; untuk gambar dengan string Base64 yang sudah tersedia, gunakan tool image to Base64.

Overhead ukuran

Base64 menambah sepertiga dari ukuran file, tetapi kompresi teks di server (gzip atau Brotli) dapat menghemat kembali sebagian besar tambahan tersebut karena teks hasil encoding mudah dikompresi. Biaya sebenarnya adalah data tidak dapat di-cache secara terpisah dan di-download lagi setiap kali halaman atau stylesheet yang memuatnya di-download.

Cara menggunakannya

  1. Pilih atau letakkan file; gambar akan ditampilkan dalam pratinjau.
  2. Untuk file SVG, pilih encoding URL atau Base64.
  3. Salin data URI atau potongan CSS maupun HTML.

Privasi & batasan

File dibaca di browser Anda dan tidak pernah di-upload.

Alat terkait

Gambar ke Base64Base64URL Encoder

Pertanyaan umum

Kapan saya sebaiknya menggunakan data URI?

Untuk file kecil yang digunakan sekali, seperti ikon berukuran di bawah beberapa kilobyte. File yang lebih besar sebaiknya disajikan secara terpisah agar browser dapat melakukan cache dan memuatnya secara paralel.

Mengapa menggunakan encoding URL untuk SVG?

Cara ini membuat SVG tetap mudah dibaca dan biasanya lebih kecil daripada Base64; tanda kutip ganda diubah menjadi tanda kutip tunggal agar hasilnya dapat ditempatkan di dalam url("…") atau atribut HTML.

Apakah ada batas ukuran?

Browser modern menerima data URI berukuran hingga banyak megabyte dalam gambar dan stylesheet, tetapi data URI yang besar memperlambat parsing dan membuat halaman menjadi berat.

Alat gratis · berjalan di browser anda · tanpa perlu akun