Imagen a Base64 y vuelta
Convierte imágenes a data URI para incrustarlas y decodifica Base64 a imagen. Todo local.
Para detectar el tipo al decodificar Base64 sin prefijo se leen los bytes de cabecera (PNG, JPEG, GIF, WebP, BMP, ICO). El data URI Base64 ocupa aproximadamente un 33% más que el fichero binario original.
Hecho por
Miguel Ángel Colorado Marin (MACM)
Hecho por
Miguel Ángel Colorado Marin (MACM)
Full-Stack Developer · Guadalajara, España
Desarrollo aplicaciones web, herramientas digitales y proyectos completos — desde el diseño hasta el despliegue.
Incrustar una imagen pequeña como data URI evita una petición HTTP y simplifica un snippet, pero a cambio Base64 ocupa alrededor de un 33% más que el binario original, así que conviene saber cuánto pesa antes de decidir. Esta herramienta convierte cualquier imagen a su data URI, muestra el sobrecoste exacto y permite copiar solo el Base64 o el valor completo con el prefijo data:. En sentido contrario, convierte de vuelta cadenas Base64 a una imagen descargable, detectando el formato a partir de los primeros bytes cuando no hay prefijo, algo habitual al copiar de un JSON o de una base de datos.
Características
- ✓Imagen a data URI Base64 con un clic
- ✓Opción de copiar solo el Base64, sin el prefijo data:
- ✓Estadísticas de tamaño original, tamaño Base64 y sobrecoste porcentual
- ✓Decodificación de data URI o de Base64 sin prefijo
- ✓Detección del formato por bytes de cabecera (PNG, JPEG, GIF, WebP, BMP, ICO) y descarga de la imagen
¿Cómo convertir una imagen a Base64 y decodificarla?
- 1
Elige el sentido
Imagen a Base64 para incrustar, o Base64 a imagen para recuperarla.
- 2
Carga o pega el contenido
Selecciona una imagen o pega una cadena Base64 o un data URI.
- 3
Copia o descarga
Copia el data URI para tu CSS/HTML o descarga la imagen decodificada.
- 4
Vigila el sobrecoste
Comprueba el porcentaje extra antes de incrustar imágenes grandes.
Preguntas frecuentes
¿Cuándo conviene incrustar una imagen como Base64?
Para imágenes muy pequeñas (iconos, logos de menos de unos pocos KB) que se usan en CSS o en un email, donde ahorrar una petición importa. Para imágenes grandes es contraproducente: Base64 pesa un 33% más, no se cachea por separado y bloquea el renderizado del HTML.
¿Por qué Base64 ocupa más que el fichero original?
Porque codifica cada 3 bytes binarios en 4 caracteres ASCII, con relleno al final. Eso da un crecimiento teórico del 33,3%, que es el sobrecoste que verás indicado.
¿Cómo detecta el formato si pego solo el Base64?
Decodifica los primeros bytes y busca las firmas conocidas: PNG (89 50 4E 47), JPEG (FF D8 FF), GIF (47 49 46), WebP (RIFF…WEBP), BMP (42 4D) e ICO (00 00 01 00). Si no reconoce ninguna, indica que la entrada no es una imagen compatible.
¿Se suben mis imágenes?
No. La conversión y la descodificación usan la File API y funciones locales del navegador. Nada sale de tu dispositivo.
Herramientas relacionadas
Incrusta Imagen a Base64 en tu web
Integra Imagen a Base64 en cualquier página web con un simple iframe. Gratis, con atribución a miguelacm.es.
<iframe
src="https://miguelacm.es/embed/base64-image"
width="100%"
height="700"
frameborder="0"
title="Imagen a Base64 — miguelacm.es"
></iframe>