Cara menggunakan
- Ketik teks atau pilih file yang ingin Anda sematkan.
- Periksa atau isi Tipe MIME, seperti image/png atau image/svg+xml, lalu pilih Base64 atau Pengodean persen.
- Salin data URI yang dihasilkan ke HTML, CSS, atau JSON Anda.
- Untuk memeriksa data URI yang sudah ada, tempel di bagian Urai untuk melihat tipe MIME, set karakter, ukuran, dan pratinjaunya, lalu unduh file yang tersemat.
Sintaks data URI
Data URI, yang didefinisikan dalam RFC 2397, membawa sebuah file kecil di dalam URL itu sendiri:
data:[<mediatype>][;base64],<data>
data:text/plain;charset=UTF-8,Hello%20world
data:image/png;base64,iVBORw0KGgo...Tipe media memberi tahu browser cara menafsirkan data; jika dihilangkan, yang diasumsikan adalah text/plain;charset=US-ASCII. Penanda ;base64 berarti bagian setelah koma adalah Base64. Tanpa penanda itu, datanya berupa teks biasa yang karakter khususnya dienkode persen.
Base64 atau pengodean persen
Base64 adalah pilihan yang tepat untuk file biner seperti PNG, JPEG, WebP, font, dan PDF. Ukurannya selalu bertambah sekitar 33%. Untuk format teks, pengodean persen sering kali lebih kecil, karena sebagian besar karakter tetap apa adanya dan hanya beberapa, seperti <, >, #, %, dan tanda kutip ganda, yang perlu di-escape. Karena itu, cara ini cocok untuk ikon SVG, dan hasilnya yang mudah dibaca juga lebih baik dikompresi dengan gzip atau Brotli. Namun, setiap byte teks non-ASCII menjadi tiga karakter, sehingga untuk teks Tionghoa atau Sirilik Base64 biasanya lebih pendek. Jika ragu, coba kedua opsi dan pakai hasil yang lebih pendek.
/* SVG berpengodean persen di CSS: tanda kutip tunggal di dalam, # ditulis sebagai %23 */
.dot { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='4' fill='%23f60'/%3E%3C/svg%3E"); }Kapan penyematan inline menguntungkan
Data URI menghemat satu permintaan HTTP, tetapi datanya menjadi bagian dari dokumen yang memuatnya:
- Tidak ada cache terpisah. Gambar yang disematkan di HTML diunduh ulang bersama setiap halaman. Gambar yang disematkan di stylesheet di-cache bersama file tersebut, dan mengubahnya akan membatalkan cache seluruh stylesheet.
- Render pertama lebih lambat. Data URI berukuran besar di CSS menunda rendering, karena browser harus mengunduh dan mengurai seluruh stylesheet terlebih dahulu.
- Tambahan ukuran. Base64 menambah sepertiga ukuran, yang hanya sebagian dapat dipulihkan dengan mengompresi HTML atau CSS.
Dengan HTTP/2 dan HTTP/3, permintaan tambahan tidak lagi mahal, jadi sematkan secara inline hanya aset kecil berukuran beberapa kilobyte, seperti ikon, placeholder mungil, atau latar belakang yang penting, dan sajikan sisanya sebagai file biasa. Situs dengan Content Security Policy harus mengizinkan data: di img-src atau font-src agar gambar dan font yang disematkan dapat dimuat.
Pertanyaan yang sering diajukan
Apakah ada batas ukuran untuk data URI?
RFC 2397 tidak menetapkan batas, dan browser modern menerima data URI berukuran beberapa megabyte di dalam gambar dan stylesheet. Namun, data URI yang besar tetap bukan ide yang baik: halaman menjadi membengkak, tidak dapat di-cache secara terpisah, dan butuh waktu lebih lama untuk diurai.
Mengapa data URI tidak terbuka saat saya mengklik tautan ke sana?
Sebagian besar browser melarang halaman web mengarahkan jendela utama ke URL data:, sebagai perlindungan terhadap phishing. Gunakan data URI di dalam gambar, CSS, atau tautan unduhan, atau tempel URI tersebut di bagian Urai di sini untuk melihat pratinjau dan mengunduh isinya.
Bagaimana cara menggunakan data URI di HTML dan CSS?
<img src="data:image/png;base64,..."> di HTML, atau background-image: url("data:image/svg+xml,...") di CSS. Apit nilainya dengan tanda kutip di CSS, terutama untuk SVG berpengodean persen.Apakah saya perlu menentukan charset?
text/plain atau text/html yang berisi karakter non-ASCII, ya: tambahkan ;charset=UTF-8 setelah tipe media, karena jika tidak, bawaan US-ASCII dapat merusak karakter tersebut. Tipe biner seperti image/png tidak memerlukan charset.