Conversor de base64 a imagen
Pega texto base64 —crudo o en data URI— y recobra la imagen con su formato, dimensiones y tamaño. Todo se decodifica en tu navegador.
La cadena se decodifica localmente con atob. No se sube nada y la vista previa se construye en memoria.
Cómo funciona
Es la mitad decodificadora del proceso: toma texto y lo devuelve como píxeles. La entrada se limpia (espacios, comillas y envoltorios sueltos fuera), se decodifica con el atob integrado del navegador a bytes crudos y se examina en busca de un formato antes de dibujar una vista previa <img> desde una data URI en memoria. No se sube nada — cada paso es manejo local de texto y bytes.
- Anatomía de una data URI
- Una data URI completa es data:<mime>;base64,<payload>. Si el prefijo está presente, se confía primero en el tipo MIME declarado y solo se decodifica lo que viene tras la coma. Si pegas solo el payload, el MIME se deduce — ambas formas producen la misma imagen.
- Sniffing MIME por magic bytes
- Sin tipo declarado, los bytes decodificados se comparan con firmas conocidas: FF D8 FF es JPEG, 89 50 4E 47 (iVBOR) es PNG, R0lGOD es GIF, un chunk RIFF que empieza con UklGR y lleva WEBP en el desplazamiento 8 es WebP, y 42 4D (Qk0) es BMP. Lo que no encaja se marca como desconocido pero sigue siendo descargable.
- Espacios y relleno
- El base64 que llega en código suele traer saltos de línea, sangrado o comillas alrededor. El limpiador elimina espacios y valida el alfabeto restante (A-Z a-z 0-9 + / =); el relleno = que falte se repone antes de decodificar, y una cadena que aún así falla en atob se marca como inválida en lugar de decodificarse a medias.
Preguntas frecuentes
¿Por qué base64 hace la imagen más grande?
Base64 codifica cada 3 bytes brutos en 4 caracteres ASCII, así que el texto es unos 33% más grande que el archivo binario. Un JPEG de 90 KB se convierte en una cadena de unos 120 KB. Ese exceso es el precio de incrustar datos binarios en formatos de texto como CSS, JSON o HTML.
¿Conviene incrustar imágenes como data URI o servirlas como archivos?
Como regla: los iconos y sprites pequeños que deben aparecer con el primer render se inlinean bien y ahorran una petición. Todo lo demás suele funcionar mejor como archivo real — cacheo aparte, sin 33% de inflado en tu hoja de estilos, y las data URI dentro de CSS no se comprimen tan bien como el binario original con gzip/Brotli.
La vista previa no se dibujó — ¿qué pasa?
O la cadena no es realmente una imagen (los bytes decodificados no cuadran) o es un formato que el navegador no puede mostrar. El decodificador sigue mostrando el tamaño en bytes y permite descargar el resultado crudo con nombre .bin para inspeccionarlo con otras herramientas. Verifica que pegaste todo el payload y que el prefijo data:, si existía, está intacto.
¿Qué extensión usa la descarga?
La que elija la detección de formato: .jpg, .png, .gif, .webp o .bmp, según el prefijo data URI presente o los magic bytes. Si el formato no se reconoce, el archivo se descarga como image.bin — renómbralo cuando sepas qué es.
¿Se sube algo a un servidor?
No. La decodificación usa el atob integrado del navegador y la vista previa se dibuja desde una data URI en memoria. Tu cadena base64 nunca sale de la pestaña y la herramienta funciona sin conexión.