A method of embedding small files directly in HTML/CSS using the data: protocol and Base64 encoding.

Data URI — Glossary — Peasy Audio

Technical Detail

Data URI encoding maps every 3 bytes of binary data to 4 ASCII characters from a 64-character alphabet (A-Z, a-z, 0-9, +, /). This increases size by ~33% but ensures safe transmission through text-only channels. Data URIs (data:image/png;base64,...) embed small files directly in HTML/CSS, eliminating HTTP requests at the cost of larger HTML. Base64url variant replaces +/ with -_ for URL safety. Padding with '=' ensures output length is always a multiple of 4.

Example

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

Categories

Data URI

Technical Detail

Example

Related Formats

Related Tools

Related Terms