Un esquema de URL que incrusta contenido de archivo directamente en HTML, CSS o JavaScript usando cadenas codificadas en Base64 o texto plano, eliminando la necesidad de solicitudes HTTP separadas.

Data URI — Esquema de incrustación de datos en línea

Detalle técnico

Los data URI siguen la sintaxis: data:[][;charset=][;base64],. Ejemplos: data:text/plain;base64,SGVsbG8= ("Hello"), data:image/svg+xml,%3Csvg... (SVG sin codificar). Ventajas: elimina solicitudes HTTP, todo autónomo. Desventajas: expansión del 33 % para Base64, sin caché del navegador (incrustado en HTML/CSS), bloquea el parseo del documento. Son más apropiados para imágenes pequeñas (< 2 KB), iconos SVG y fuentes CSS críticas.

Ejemplo

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

Detalle técnico

Ejemplo

Formatos relacionados

Herramientas relacionadas

Términos relacionados