Imagen a Base64

Arrastra imágenes aquí o haz clic para seleccionar

Compatible con PNG, JPG, GIF, WebP

Herramienta gratuita online para convertir imágenes a Base64, compatible con PNG/JPG/WebP/GIF/SVG/BMP/AVIF y otros formatos. Procesamiento local en el navegador con Web Worker, sin subidas y sin bloqueos. Genera Data URL para CSS inline, HTML, plantillas de correo y transmisión por API.

Relacionado

Base64 a imagen

Base64 a texto

Conversor Base64 DataURL

Compresión JSON

Formatear JavaScript

Analizador de URL

¿Qué es imagen a Base64?

Imagen a Base64 es una técnica que codifica datos binarios de imagen como una cadena de texto ASCII. Base64 usa 64 caracteres imprimibles (A-Z, a-z, 0-9, +, /) para representar datos binarios, convierte cada 3 bytes en 4 caracteres Base64 y añade = como relleno final. Todo el proceso sigue el estándar RFC 4648.

**Principio de codificación**: Base64 divide cada 3 bytes (24 bits) en cuatro grupos de 6 bits, cada uno asociado a un carácter del alfabeto Base64. Si el número de bytes no es múltiplo de 3, se añaden 1-2 caracteres = de relleno. Por eso el tamaño aumenta aproximadamente un 33% (4/3 ≈ 1.33).

**Optimización con Web Worker**: esta herramienta usa Web Workers para ejecutar la codificación en un hilo del navegador independiente del hilo principal. ArrayBuffer.transfer() permite transferir datos al Worker sin copias y evita bloqueos. Incluso con imágenes de varios MB, la UI se mantiene fluida y muestra el progreso en tiempo real.

**Privacidad y seguridad**: a diferencia de herramientas que requieren subir imágenes a un servidor, esta herramienta se ejecuta por completo en el navegador. Los datos de imagen no pasan por servidores de terceros, algo especialmente importante con imágenes sensibles como identificaciones o contratos.

**Casos de uso**: las imágenes Base64 se usan a menudo en CSS Sprites (reducir solicitudes HTTP), plantillas de correo HTML (evitar bloqueos de imágenes por clientes de correo), transmisión API de datos binarios y extensiones de navegador o apps de un solo archivo cuando no se pueden referenciar recursos externos.

Casos de uso

  • CSS Sprites: incrusta iconos pequeños e imágenes en CSS background para reducir solicitudes HTTP y acelerar el primer renderizado
  • Inserción de imágenes HTML: incrusta logos, placeholders y recursos UI directamente en etiquetas HTML img para reducir solicitudes de imagen
  • Plantillas de correo: los clientes de correo bloquean imágenes externas por defecto; Base64 inline ayuda a mostrarlas de inmediato sin autorización del usuario
  • Transmisión API: convierte datos binarios de imagen en cadenas Base64 e insértalas en cuerpos JSON para llamadas API
  • Optimización de rendimiento frontend: reduce solicitudes HTTP al incrustar recursos críticos del primer viewport
  • Extensiones de navegador y apps de un solo archivo: incrusta todas las imágenes con Base64 cuando no sea posible referenciar recursos externos

Cómo Usar

  1. Selecciona o arrastra el archivo de imagen que necesitas codificar (PNG/JPG/WebP/GIF, etc.)
  2. La herramienta convierte automáticamente la imagen a Base64 dentro de un Web Worker del navegador y muestra el progreso en tiempo real
  3. Revisa el resultado codificado: cadena Base64 pura, Data URL completo o etiqueta HTML img, y copia el formato que necesites
  4. Pega el resultado en CSS, HTML, archivos de configuración JSON o solicitudes API

Características

  • Compatibilidad completa de formatos: PNG, JPG, WebP, GIF, SVG, BMP, AVIF, HEIC/HEIF y otros formatos comunes con detección automática de MIME
  • Aceleración con Web Worker: la codificación de archivos grandes se ejecuta en un hilo independiente con barra de progreso en tiempo real, sin bloquear la UI principal
  • Procesamiento local sin subidas: las imágenes se transfieren al Worker mediante ArrayBuffer de copia cero y los datos no pasan por ningún servidor
  • Generación automática de Data URL: crea el prefijo data:image/xxx;base64, listo para pegar en HTML img o en propiedades CSS background
  • Conversión bidireccional: admite los modos imagen a Base64 y Base64 a imagen sin interferencias
  • Copia y descarga con un clic: copia Base64 puro, Data URL completo, etiqueta HTML img o descarga el resultado como archivo .txt

Preguntas Frecuentes

¿Qué formatos de imagen admite?

Admite PNG, JPG, WebP, GIF, SVG, BMP, AVIF, HEIC/HEIF y otros formatos comunes. La herramienta detecta automáticamente el tipo MIME y genera el prefijo Data URL correspondiente, como data:image/png;base64,...

¿Cómo funciona la aceleración con Web Worker?

Un Web Worker es un hilo del navegador independiente del hilo principal de la UI. La codificación tradicional puede bloquear la página; esta herramienta ejecuta la tarea en el Worker con transferencia ArrayBuffer y callbacks de progreso, manteniendo la interfaz fluida incluso con archivos grandes.

¿Las imágenes se suben a un servidor?

No. La conversión se completa directamente en el hilo Worker del navegador mediante tecnología ArrayBuffer de copia cero. El contenido de la imagen no pasa por ningún servidor, a diferencia de herramientas que dicen procesar en el navegador pero en realidad suben datos.

¿Cuánto aumenta el tamaño tras codificar en Base64?

Base64 genera aproximadamente el 133% del tamaño binario original, es decir, cerca de un 33% más. Cada 3 bytes (24 bits) se convierten en 4 caracteres Base64 (6 bits cada uno), con relleno = al final si hace falta. Se recomienda mantener cada imagen inline por debajo de 10KB.

¿Qué imágenes son adecuadas para incrustar en Base64?

Se recomienda para iconos e imágenes pequeñas de menos de 10KB. Incrustar imágenes pequeñas reduce solicitudes HTTP, pero las imágenes grandes aumentan el tamaño de HTML/CSS y pueden perjudicar la carga. Las imágenes grandes deberían usar URL independientes.

¿Cuál es la diferencia entre Data URL y Base64 puro?

Un Data URL tiene el formato data:image/png;base64, seguido del contenido codificado en Base64, y puede colocarse directamente en el atributo src de HTML img. Base64 puro es solo la cadena codificada y necesita un prefijo MIME para usarse correctamente.

¿Puedo usar esta herramienta para probar integraciones API?

Sí. Tras convertir una imagen a Base64, puedes enviarla como valor de campo en un cuerpo JSON hacia una API backend. La herramienta admite copia con un clic y es compatible con la mayoría de ejemplos de documentación API.

¿Por qué elegir Base64 inline en vez de referencias de imagen normales?

Base64 inline es útil para archivos pequeños (<10KB) porque reduce solicitudes HTTP. Para imágenes grandes, las URL independientes cargan más rápido porque el navegador puede descargar recursos en paralelo y usar caché.