Data URI
Data URI (Skema Data Inline)
Skema URL yang memungkinkan data disematkan langsung ke dalam dokumen sebagai string yang di-encode, menghilangkan kebutuhan permintaan HTTP terpisah untuk sumber daya kecil seperti gambar dan font.
Detail Teknis
Sintaks: data:[mediatype][;base64],data. Contoh: data:image/png;base64,iVBORw0KGgo..., data:text/html,%3Ch1%3EHello%3C/h1%3E (teks di-percent-encode), data:text/plain;charset=utf-8,Hello. Data URI menghapus satu permintaan HTTP tetapi: meningkatkan ukuran dokumen HTML/CSS sebesar 33% (overhead Base64), tidak dapat di-cache secara independen, memblokir rendering parser (inline di HTML). Penggunaan terbaik: gambar kecil <1-2KB (ikon, placeholder LQIP), font kritis (subset), SVG inline. Anti-pattern: gambar besar (gunakan permintaan HTTP terpisah + caching), data dinamis (gunakan endpoint API). Batas ukuran: browser umumnya mendukung hingga 2MB, IE8 membatasi hingga 32KB. Pertimbangan keamanan: data:text/html dapat mengeksekusi JavaScript — CSP default-src memblokir data URI secara default.
Contoh
```javascript
// Encode string to Base64
const encoded = btoa('Hello, World!'); // 'SGVsbG8sIFdvcmxkIQ=='
// Decode Base64 to string
const decoded = atob('SGVsbG8sIFdvcmxkIQ=='); // 'Hello, World!'
// File to Base64 Data URI
const reader = new FileReader();
reader.onload = () => console.log(reader.result);
// → 'data:image/png;base64,iVBORw0KGgo...'
reader.readAsDataURL(file);
```