Cómo usar esta herramienta para desarrolladores
- Introduce el contenido textual que quieres incrustar.
- Selecciona el tipo MIME y el parámetro charset.
- Elige percent-encoding o Base64.
- Genera la URI y copia el resultado en el contexto que la admita.
Constructor de Data URI
Construye una Data URI directamente en el navegador a partir de contenido textual. Puedes indicar el tipo MIME, añadir un charset y elegir entre percent-encoding o Base64. La herramienta calcula la longitud final y deja visible la cabecera generada, lo que ayuda a comparar el coste de cada modo antes de incrustar pequeños recursos en HTML, CSS o pruebas de API.
Datos de entrada
Contenido de la Data URIEspacio publicitario
Qué hace esta herramienta para desarrolladores
Crea la sintaxis “data:[mediatype][;charset=...][;base64],payload”. En modo Base64 codifica los bytes UTF-8; en modo percent usa encodeURIComponent para representar caracteres que no son seguros.
Contenido → bytes UTF-8 / percent-encoding → metadatos MIME → concatenación del esquema data:.
Las Data URI aumentan el tamaño del documento y no siempre se benefician de caché independiente. Son más adecuadas para recursos pequeños y controlados.
Ejemplo
Entrada
Hola
Salida
data:text/plain;charset=UTF-8,Hola
Casos de uso
- Incrustar SVG pequeños en CSS o HTML.
- Crear payloads autocontenidos para pruebas.
- Comparar Base64 y percent-encoding para texto.
- Generar ejemplos de URI para documentación técnica.
Consejos para obtener resultados fiables
- Usa un MIME type específico para que el consumidor interprete correctamente el recurso.
- Para SVG o texto ASCII, compara el tamaño de percent-encoding frente a Base64.
- No incrustes secretos: la Data URI queda visible en el documento.
- Evita recursos grandes porque aumentan HTML/CSS y pueden superar límites del consumidor.
- Comprueba la política CSP del sitio antes de usar data: en producción.
Detalles del procesamiento
La implementación genera únicamente Data URI textuales. En Base64 opera sobre UTF-8 y en modo percent conserva la estructura data: con metadatos explícitos.
El cargador del template lee archivos como texto, por lo que esta página no es un constructor binario fiable para PNG, ZIP u otros archivos arbitrarios. Para esos casos se requiere lectura ArrayBuffer.
Preguntas frecuentes
¿Cuándo conviene usar Base64 dentro de una Data URI?
Suele ser útil cuando el payload contiene muchos bytes no ASCII o binarios; para texto ASCII, percent-encoding puede ser más legible.
¿Es obligatorio indicar el tipo MIME en una Data URI?
No en todos los casos, pero indicarlo evita depender del valor por defecto y mejora la interpretación del recurso.
¿Puedo incluir UTF-8 directamente en una Data URI?
Sí, pero los caracteres deben representarse de forma válida para URI; la herramienta aplica percent-encoding o Base64 sobre UTF-8.
¿Una Data URI es más eficiente que un archivo externo?
No necesariamente. El contenido queda embebido, puede crecer por la codificación y pierde caché independiente; es más apropiado para recursos pequeños.
¿Puedo usar esta página para convertir un PNG a Data URI?
No de forma fiable con el cargador textual actual. Para binarios se necesita leer los bytes del archivo, no su representación como texto.
Herramientas relacionadas para desarrolladores
Resumen técnico
| Esquema | data: |
|---|---|
| MIME type | Seleccionable |
| Charset | UTF-8 opcional |
| Payload | Percent o Base64 |
Explorar Codificación y decodificación
Consulta más utilidades de conversión, codificación e inspección en esta categoría.
Ver categoría