Generator Data URI

Data URI (atau data URL) menyematkan konten file langsung dalam string — data:<mime-type>;base64,<data> — sehingga dapat digunakan di mana pun URL normal diharapkan tanpa permintaan HTTP terpisah. Alat ini membuat satu dari file yang diunggah atau teks yang ditempel, dan melaporkan seberapa besar versi yang dikodekan dibandingkan dengan asli.

Cara menggunakannya

1. Pilih sumber: Unggah File (tipe file apa pun — gambar, font, PDF, audio, apa pun) atau Masukkan Teks (tempel teks mentah, HTML, CSS, JavaScript atau markup SVG dan pilih tipe MIMEnya).
2. Untuk unggahan file, browser secara otomatis mendeteksi tipe MIME dari file itu sendiri. Jika tidak sesuai, atau Anda memerlukan jenis yang berbeda, centang Ganti tipe MIME yang terdeteksi dan masukkan satu secara manual (mis. image/png, font/woff2).
3. Salin Data URI yang dihasilkan — siap untuk ditempel ke dalam <img src>, CSS background-image: url(...), bidang JSON, atau @font-face src.
4. Periksa tabel Ukuran & Tipe untuk tipe MIME yang terdeteksi/dipilih, ukuran byte asli, ukuran data URI yang dikodekan, dan peningkatan persentase.
5. Jika sumbernya adalah gambar, Pratinjau langsung di bawah data URI sehingga Anda dapat memastikannya didekodekan dengan benar sebelum menggunakannya.

Semuanya berjalan secara lokal di browser Anda — file yang Anda unggah tidak akan pernah dikirim ke server.

Mengapa data URI begitu banyak lebih besar dari file asli?

Enkoding Base64 mewakili setiap 3 byte data biner sebagai 4 karakter ASCII, yang saja menambah sekitar 33% ke ukuran. Di atas itu, awalan data:<mime-type>;base64, menambahkan overhead tetap kecil. Untuk snippet pendek, overhead ini bisa mendominasi — mengenkode 13 byte dari "Hello, World!" menghasilkan data URI lebih dari 3x panjang asli — tetapi untuk file yang lebih besar, peningkatan persentase mendekati overhead base64 ~33%.

Kapan saya harus menggunakan data URI alih-alih file biasa?

Data URI berguna untuk aset kecil yang sering digunakan kembali — ikon, gambar latar belakang kecil, web font, gambar placeholder kecil — di mana menyimpan permintaan HTTP lebih besar dari penalti ukuran ~33% dan fakta bahwa aset tidak lagi dapat di-cache secara independen atau dibagikan antar halaman. Untuk apa pun yang lebih besar dari beberapa kilobyte, atau aset yang digunakan kembali di banyak halaman, file tertaut normal yang dapat di-cache browser hampir selalu pilihan yang lebih baik.

Apakah ini berfungsi dengan teks non-Inggris atau emoji?

Ya. Teks yang ditempel dikodekan UTF-8 sebelum dikodekan base64, jadi karakter aksen, teks CJK, dan emoji semuanya putaran perjalanan dengan benar. (Beberapa alat yang lebih lama menggunakan trik btoa(unescape(encodeURIComponent(text))) yang salah menangani teks Unicode tertentu — alat ini menggunakan TextEncoder secara langsung.)

MIME type apa yang harus saya pilih untuk teks yang ditempel?

Cocokkan konten: text/plain untuk teks biasa, text/html untuk fragmen HTML, text/css untuk stylesheet, text/javascript untuk script, dan image/svg+xml untuk markup SVG (ini juga yang membuat pratinjau SVG dirender). Mendapatkan tipe MIME yang tepat penting jika data URI dikonsumsi oleh sesuatu yang menginspeksinya — browser yang merender tag <img>, misalnya, memerlukan tipe image/*.

Terkait

Untuk pergi ke arah lain — mendekodekan data URI atau string Base64 kembali ke teks biasa — gunakan Base64 Decode. Untuk SVG secara khusus, SVG to Base64 Encode juga menghasilkan snippet HTML <img> dan CSS background-image yang siap ditempel di samping data URI.