🍋
Menu
Web

Data URI

Data URI (Inline-Daten-Schema)

Ein URL-Schema, das Dateiinhalte direkt in HTML, CSS oder JavaScript im Format data:[Medientyp][;base64], einbettet, wodurch die Notwendigkeit einer separaten HTTP-Anfrage zum Laden der Ressource entfällt.

Technisches Detail

Data-URIs folgen der Syntax: data:[][;charset=][;base64],. Sie werden häufig für kleine Bilder (unter 5 KB, wobei der Base64-Overhead die Einsparung einer HTTP-Anfrage aufwiegt), SVG-Einbettung in CSS (data:image/svg+xml,...), Schriftarten-Einbettung und JSON-Dateneinbettung verwendet. Einschränkungen: nicht separat vom Browser gecacht (stattdessen mit dem enthaltenden Dokument), erhöht die Dokumentgröße um ~33% (Base64-Overhead), umgeht CDN-Caching, und sehr große Data-URIs können Parsing verlangsamen. In modernem CSS werden Data-URIs oft mit url() für Hintergrundbilder verwendet: background: url('data:image/svg+xml,...').

Beispiel

```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);
```

Verwandte Formate

Verwandte Tools

Verwandte Begriffe