Guía de uso de la herramienta

Conoce cuándo usar esta herramienta, qué admite y cómo la aplican los usuarios.

Datos clave

Categoría: Development
Tipos de entrada: file, select, text
Tipo de salida: text
Cobertura de ejemplos: 4
API disponible: Sí

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

1Seleccione o arrastre el archivo que desea convertir, como una imagen PNG, un archivo SVG o una fuente WOFF2.
2Elija el tipo de codificación (Base64, URL-encoded o texto sin procesar) y defina un tipo MIME personalizado si es necesario.
3Seleccione el formato de salida deseado, ya sea como Data URI puro, etiqueta HTML <img>, propiedad CSS background o enlace Markdown.
4Copie 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'.

{
  "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>'.

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.

{
  "encoding": "base64",
  "outputFormat": "html"
}

Generador de Data URI

Ejecutar esta herramienta

Ejemplos que encajan con esta herramienta

Continuar con herramientas y temas relacionados

Conoce cuándo usar esta herramienta, qué admite y cómo la aplican los usuarios.

Datos clave

Resumen

Cuándo usarlo

Cómo funciona

Casos de uso

Ejemplos

1. Incrustar un icono SVG en CSS

2. Insertar una imagen PNG en un correo HTML

Preguntas frecuentes

Ejemplos de Procesamiento de Imágenes Web TypeScript

Ejemplos de Procesamiento de Imágenes Web Rust

Muestras PDF

Muestras de Comunicación en Tiempo Real WebRTC

Secuencia de Imágenes a Video

Visualizador musical de partículas de imagen

Hoja de Contacto PDF

Hoja de Storyboard PDF