Apa itu Generator Data URI?

Data URI Generator mengonversi file menjadi data URI berenkode base64 yang bisa Anda sematkan langsung di HTML, CSS, atau JavaScript. Menghilangkan permintaan HTTP tambahan untuk aset kecil seperti ikon dan font.

Lepas file maksimal 20 MB, lalu alat mendeteksi tipe MIME, mengkodekan byte menjadi base64, dan memberi tiga cuplikan siap tempel: data URI mentah, aturan CSS background-image, dan tag HTML img. Gambar disertai pratinjau langsung, jadi keluaran kosong atau rusak ketahuan sebelum masuk kode produksi. Anda juga bisa menempel teks untuk mengenkode string SVG atau JSON, memperkecil gambar besar sebelum dienkode agar URI tetap kecil, memperbaiki tipe MIME jika terdeteksi keliru, mengenkode beberapa file sekaligus, mengambil file jarak jauh langsung dari URL-nya, atau beralih ke mode dekode untuk menempel data URI dan mengunduh kembali file aslinya.

Cara menggunakan

1. Unggah file lewat pemilih, atau beralih ke mode teks dan tempel sebuah string (SVG, JSON, CSS) untuk dienkode.
2. Alat ini mengenkode ke base64 dan menghasilkan data URI lengkap dengan tipe MIME yang benar.
3. Salin data URI untuk digunakan di atribut img src, CSS background-image, atau kode JavaScript.

Kapan menggunakan

• Menyisipkan logo atau ikon kecil di demo HTML satu file tanpa hosting aset.
• Menanam gambar di email agar tampil meski klien memblokir pemuatan jarak jauh.
• Menempelkan font atau SVG ke CSS supaya satu permintaan yang memblok render hilang.

Hasil

Konversi favicon.png berukuran 2KB menjadi data URI dan tempel langsung di HTML Anda — satu permintaan jaringan lebih sedikit di setiap pemuatan halaman.

FAQ

Kenapa data URI hasil encoding sekitar 33% lebih besar dari file?

Base64 mewakili tiap 3 byte biner dengan 4 karakter ASCII, jadi membesar 33%. Gzip pada respons HTTP mengembalikan sebagian besar, tapi file HTML atau CSS di disk memang lebih besar daripada aset aslinya.

Berapa batas ukuran praktis untuk data URI?

Sekitar 10 KB sebelum encoding untuk pemakaian inline. Lebih dari itu peramban tetap memproses, tapi cache hilang (di-parse ulang tiap halaman) dan HTML atau CSS jadi sulit diedit. Aset yang lebih besar sebaiknya dihosting biasa.

Apakah data URI bisa jadi background-image di CSS?

Bisa, alat sudah memberi aturan CSS lengkap. Bungkus URI di dalam url() pada background-image. Peramban mendekodenya saat paint pertama, ikon kecil tetap inline dan satu permintaan jaringan yang akan menahan render pertama hilang.

Apakah peramban menyimpan cache data URI seperti gambar biasa?

Tidak. Data URI bagian dari dokumen induk, jadi hanya tercache saat dokumennya tercache. Gambar yang sama dirujuk dari dua puluh halaman akan diparsing dua puluh kali. Untuk aset lintas halaman, URL hosting biasa lebih cepat secara total.

Apakah data URI berfungsi di email HTML?

Gmail dan Apple Mail menampilkannya. Outlook (desktop Windows) menghapusnya. Untuk kompatibilitas luas, lampirkan gambar sebagai bagian yang dirujuk lewat CID daripada menempelkan data URI di dalam body HTML.

Alat terkait