Imagen a Base64
Elige una imagen con el selector. La codificación corre localmente con FileReader; verás vista previa, Base64 en bruto, data URI completo, MIME y nombre de archivo. Usa Copy Base64 o Copy data URI según necesites.
Actualizado 2026-08-04 · developer
Sobre esta herramienta
Solo se aceptan archivos con MIME de imagen. readAsDataURL construye el data URI; el Base64 en bruto es la parte tras la coma. El estado informa el tamaño en KB o por qué se rechazó un no-imagen.
Cómo usar
- Elegir un archivo de imagen: Usa el control Image file y elige PNG, JPG, GIF, WebP o similar.
- Esperar la codificación local: El navegador lee el archivo y muestra vista previa con campos Base64 y data URI.
- Copiar Base64 o data URI: Pulsa Copy Base64 para la cadena en bruto, o Copy data URI para la URL completa.
- Comprobar MIME y nombre: Confirma el código MIME y el nombre bajo los textareas antes de embeber.
Casos de uso
- Inserta un icono pequeño en CSS o HTML sin alojar un recurso aparte.
- Pega un data URI en un prototipo o plantilla de correo que bloquee imágenes externas.
- Revisa la cadena MIME y la longitud Base64 antes de embeber en JSON.
Consejos
- Prefiere imágenes pequeñas; los archivos enormes dan cadenas largas difíciles de pegar.
- Usa Copy data URI cuando necesites el prefijo data:image/...;base64,.
FAQ
¿Se suben las imágenes a un servidor?
No. FileReader codifica el archivo elegido solo en tu navegador.
¿Y si elijo un archivo que no es imagen?
Se limpia la salida y se pide seleccionar una imagen como PNG o JPG.
¿Qué diferencia hay entre Base64 y data URI?
Base64 (raw) son solo los bytes codificados; el data URI incluye el prefijo data:image/...;base64,.
¿Por qué falló la codificación?
Si no se puede leer el archivo, el estado muestra Failed to read the file—prueba otra imagen.