Generador de Data URI

Convierte archivos en Data URIs (Base64 o porcentaje-codificado) para incrustar imágenes, fuentes y recursos directamente en HTML, CSS o Markdown

Click to upload file or drag and drop file here

Maximum file size: 10MB Supported formats: image/png, image/jpeg, image/gif, image/webp, image/avif, image/bmp, image/svg+xml, image/x-icon, image/tiff, audio/mpeg, audio/wav, audio/ogg, audio/flac, video/mp4, video/webm, font/woff, font/woff2, font/ttf, font/otf, application/pdf, text/css, text/javascript, text/plain, text/html, application/json, application/xml, */*

Datos clave

Categoría
Desarrollo y Web
Tipos de entrada
file, select, text
Tipo de salida
text
Cobertura de muestras
4
API disponible
Yes

Resumen

El Generador de Data URI le permite convertir cualquier archivo local en una cadena de texto codificada (Base64 o codificación por porcentaje) para incrustar imágenes, fuentes, audios y otros recursos directamente en sus archivos HTML, CSS o Markdown, eliminando la necesidad de realizar peticiones HTTP adicionales.

Cuándo usarlo

  • •Cuando desea optimizar el rendimiento web reduciendo el número de peticiones HTTP para iconos pequeños o imágenes de fondo.
  • •Al crear correos electrónicos HTML auto-contenidos o plantillas que requieren imágenes incrustadas sin depender de servidores externos.
  • •Para distribuir archivos CSS o Markdown que incluyan fuentes personalizadas o gráficos vectoriales SVG directamente en el código.

Cómo funciona

  • •Seleccione o arrastre el archivo que desea convertir, como una imagen PNG, un archivo SVG o una fuente WOFF2.
  • •Elija el tipo de codificación (Base64, URL-encoded o texto sin procesar) y defina un tipo MIME personalizado si es necesario.
  • •Seleccione el formato de salida deseado, ya sea como Data URI puro, etiqueta HTML <img>, propiedad CSS background o enlace Markdown.
  • •Copie el código generado directamente al portapapeles para pegarlo en su editor de código.

Casos de uso

Incrustar logotipos SVG directamente en hojas de estilo CSS para evitar parpadeos durante la carga de la página.
Insertar fuentes web WOFF2 en archivos CSS para asegurar que los textos se rendericen correctamente sin dependencias externas.
Crear firmas de correo electrónico en HTML con imágenes incrustadas que no se bloqueen por falta de conexión a internet.

Ejemplos

1. Incrustar un icono SVG en CSS

Diseñador Web Front-end
Contexto
Está optimizando una página de aterrizaje y quiere reducir las peticiones HTTP de los iconos de redes sociales en formato SVG.
Problema
Los iconos SVG externos causan un pequeño retraso visual al cargar la página por primera vez.
Cómo usarlo
Sube el archivo facebook-icon.svg, selecciona la codificación 'URL-encoded' y el formato de salida 'CSS background'.
Configuración de ejemplo
{
  "encoding": "url",
  "outputFormat": "css"
}
Resultado
Obtiene una regla CSS background-image: url("data:image/svg+xml;utf8,...") lista para pegar en su hoja de estilos.

2. Insertar una imagen PNG en un correo HTML

Especialista en Email Marketing
Contexto
Necesita enviar un boletín informativo con un banner promocional en formato PNG, asegurando que se muestre incluso si el cliente de correo bloquea imágenes externas.
Problema
Las imágenes alojadas externamente a menudo no se cargan por defecto en las bandejas de entrada de los usuarios.
Cómo usarlo
Sube el archivo banner.png, selecciona la codificación 'Base64' y el formato de salida 'Etiqueta HTML <img>'.
Configuración de ejemplo
{
  "encoding": "base64",
  "outputFormat": "html"
}
Resultado
Genera una etiqueta <img src="data:image/png;base64,iVBORw0KGgo..." /> que muestra el banner de forma local e inmediata.

Probar con muestras

json, xml, html
Muestras PDF
Muestras PDF generadas por herramientas 2026-02-01 a 2026-02-10
preferred input family image,pdf,text
image, pdf
Muestras de Comunicación en Tiempo Real WebRTC
Muestras completas de WebRTC para comunicación de audio/video P2P, canales de datos, compartir pantalla y servidor de señalización
preferred input family audio,video,text
audio, video
Ejemplos de Códigos QR
Imágenes de códigos QR de muestra para probar herramientas de lectura y generación de códigos QR
preferred input family image,text,json
image, text
Ejemplos de XML
Ejemplos de formato XML (eXtensible Markup Language) desde estructuras simples hasta complejas
preferred input family image,text,xml
image, text

Hubs relacionados

Herramientas de codificacion y conversion de audio
Compara conversion de formatos de audio, cambios de bitrate, conversion de frecuencia de muestreo, cambio de codec y exportacion en un solo hub.
Herramientas de conversion de formatos de imagen y exportacion animada
Compara convertidores de imagen para JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 y salidas pensadas para animacion en un solo hub.
Herramientas de intercambio JSON y traduccion de formatos
Compara herramientas de conversion JSON para CSV, YAML, TOML, GraphQL, XML, Markdown, Excel, BSON, EDN y otros formatos estructurados en un solo hub.
Herramientas de conversión de texto, codificación y normalización
Compara conversión de mayúsculas y minúsculas, conversión de ancho de caracteres, conversión de codificación, manejo de quoted-printable y normalización de texto en un solo hub.

Preguntas frecuentes

¿Qué es un Data URI?

Es un esquema de URI que permite incluir datos en línea dentro de documentos web como si fueran recursos externos.

¿Qué formatos de salida puedo generar?

Puede generar el Data URI puro, una etiqueta HTML <img>, una regla de fondo CSS o un enlace de imagen para Markdown.

¿Cuál es el límite de tamaño para los archivos?

El generador admite archivos individuales con un tamaño máximo de hasta 10 MB.

¿Cuándo es mejor usar codificación URL en lugar de Base64?

La codificación URL es ideal para archivos SVG, ya que mantiene el texto legible y genera un tamaño de archivo menor que Base64.

¿Puedo forzar un tipo MIME específico?

Sí, puede sobrescribir el tipo MIME detectado automáticamente ingresando el valor deseado en el campo de tipo MIME personalizado.

Documentación de la API

Punto final de la solicitud

POST /es/api/tools/data-uri-generator

Parámetros de la solicitud

Nombre del parámetro Tipo Requerido Descripción
file file (Subida requerida) Sí -
encoding select No -
outputFormat select No -
customMime text No -

Los parámetros de tipo archivo necesitan ser subidos primero vía POST /upload/data-uri-generator para obtener filePath, luego pasar filePath al campo de archivo correspondiente.

Formato de respuesta

{
  "result": "Processed text content",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
Texto: Texto

Documentación de MCP

Agregue este herramienta a su configuración de servidor MCP: 

{
  "mcpServers": {
    "elysiatools-data-uri-generator": {
      "name": "data-uri-generator",
      "description": "Convierte archivos en Data URIs (Base64 o porcentaje-codificado) para incrustar imágenes, fuentes y recursos directamente en HTML, CSS o Markdown",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=data-uri-generator",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Puede encadenar múltiples herramientas, por ejemplo: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, máximo 20 herramientas.

Soporte para enlaces de archivos URL o codificación Base64 para parámetros de archivo.

Si encuentra algún problema, por favor, póngase en contacto con nosotros en [email protected]