Convertir imagen a Base64
Convierte una imagen a data URI Base64 y al revés, con snippets listos.
¿Cómo convertir una imagen a Base64 (data URI)?
Convertir una imagen a Base64 significa transformar sus bytes binarios en un texto ASCII que se puede pegar directamente dentro de HTML, CSS, JSON o cualquier formato que solo acepte texto: el resultado es un data URI del tipo data:image/png;base64,iVBORw0KG... que el navegador renderiza como si fuera un archivo aparte, sin hacer una petición extra al servidor. Esta herramienta de Docuboxer hace la conversión en ambos sentidos —imagen a Base64 y Base64 a imagen— 100% en tu navegador: la imagen nunca se sube a ningún servidor, así que funciona igual de rápido con capturas de pantalla, logos o fotos con datos sensibles. Detecta el tipo de imagen automáticamente (PNG, JPG, GIF, WebP o SVG), genera el data URI completo, el Base64 pelado y snippets listos para copiar en HTML, CSS y Markdown, avisando cuándo el resultado pesa más de lo razonable para incrustarlo.
Cómo usar Convertir imagen a Base64
- Arrastra tu imagen a la zona de carga o haz click para seleccionarla desde tu equipo (PNG, JPG, GIF, WebP o SVG).
- La herramienta genera al instante el data URI completo, el Base64 sin prefijo y los snippets HTML, CSS y Markdown listos para pegar.
- Copia el bloque que necesites con un clic, o cambia a la pestaña Base64 → Imagen para pegar un data URI o Base64 y previsualizar o descargar la imagen resultante.
Casos de uso comunes
Incrustar un logo o icono pequeño sin petición HTTP extra
Para iconos de pocos KB (favicons, logos de email, íconos de UI), incrustar el data URI directamente en el HTML o el CSS ahorra una petición de red completa, algo que se nota especialmente en páginas con muchos elementos pequeños.
Emails HTML donde las imágenes externas se bloquean
Muchos clientes de correo bloquean la carga de imágenes remotas por defecto. Incrustar imágenes pequeñas como Base64 dentro del propio HTML del email garantiza que se vean siempre, sin depender de que el destinatario las autorice.
Prototipos y demos sin servidor de archivos
Al construir un prototipo estático o un CodePen, pegar la imagen como data URI evita montar hosting de assets solo para una maqueta que va a vivir un rato.
Depurar una respuesta de API que devuelve imágenes en Base64
Algunas APIs (generación de imágenes, OCR, firmas digitales) devuelven el resultado como Base64 pelado dentro de un JSON. Pega ese valor en el modo Base64 → Imagen para verlo sin escribir código.
Extraer y reutilizar un data URI ya incrustado en código
Si encuentras un `data:image/...;base64,...` largo dentro de un CSS o un componente heredado, pégalo aquí para ver la imagen real antes de decidir si conviene extraerla a un archivo aparte.
Preguntas frecuentes
¿Cómo convierto una imagen a Base64 sin subirla a ningún servidor?
Arrastra el archivo a la zona de carga: la conversión ocurre enteramente en tu navegador con la API FileReader, sin que la imagen viaje a ningún servidor. Puedes comprobarlo desconectando internet después de cargar la página — sigue funcionando igual.
¿Cuánto pesa más una imagen al convertirla a Base64?
Aproximadamente un 33% más: Base64 representa cada 3 bytes binarios con 4 caracteres de texto. Una imagen de 90 KB ocupa unos 120 KB como Base64. La herramienta muestra ese cálculo exacto junto al resultado.
¿Cuándo NO conviene usar Base64 para una imagen?
Para imágenes de más de 100 KB, evita el Base64 casi siempre: al incrustarla en el HTML, CSS o JS, el navegador no puede cachearla por separado del documento que la contiene, así que se vuelve a descargar cada vez que cambia cualquier otra parte de ese archivo. Además Base64 no se comprime tan bien como el binario original y bloquea el renderizado hasta que llega el documento completo. Para fotos, banners o cualquier imagen de tamaño normal, sirve el archivo aparte con su propia URL.
¿Qué formatos de imagen detecta la herramienta al decodificar un Base64 pelado?
PNG, JPG, GIF, WebP y SVG, identificados por los primeros bytes del archivo (su 'firma'), no por la extensión. Si pegas un Base64 sin el prefijo data: y no reconocemos ningún formato de imagen conocido, igual puedes descargarlo como binario (.bin) para inspeccionarlo con otra herramienta.
¿Puedo pegar un data URI completo en el modo Base64 → Imagen, o solo el Base64 pelado?
Ambos funcionan. Si pegas el data URI completo (`data:image/png;base64,...`), la herramienta usa el tipo que ya trae incluido. Si pegas solo la parte Base64, sin el prefijo, lo detecta automáticamente analizando el contenido binario decodificado.
¿Es seguro convertir aquí una captura o documento con información sensible?
Sí: todo el procesamiento —lectura del archivo, codificación y decodificación— ocurre en la memoria de tu navegador, sin peticiones a ningún servidor ni almacenamiento. Al cerrar la pestaña no queda ningún rastro de la imagen ni del Base64 generado.