Loading...
Loading...
Suelta un JPG, PNG, WebP, GIF o SVG para obtener una URL de datos Base64 con fragmentos para copiar y pegar en CSS, HTML y Markdown — o pega una cadena Base64 para decodificarla de vuelta a una imagen descargable.
Base64 es una forma de representar datos binarios — como una imagen — utilizando solo caracteres ASCII imprimibles. La forma de URL de datos (una cadena que comienza con data:image/png;base64,...) te permite pegar una imagen completa directamente en HTML, CSS, JSON, Markdown, una firma de correo electrónico o una respuesta del servidor, sin necesidad de un archivo separado. La codificación es sin pérdida: decodificar el Base64 produce exactamente los mismos bytes que se ingresaron. La desventaja es el tamaño — Base64 toma aproximadamente un 33% más de caracteres que el binario subyacente, por lo que un PNG de 100 KB se convierte en aproximadamente 134 KB de texto Base64. Eso lo hace ideal para íconos pequeños, SVG en línea y fragmentos únicos, y una mala elección para grandes imágenes de héroe. Esta herramienta codifica cualquier imagen que sueltes y decodifica cualquier cadena Base64 de vuelta a una imagen descargable, con el trabajo realizado completamente en tu navegador.
Usa Imagen → Base64 para codificar una imagen que tengas en el disco. Usa Base64 → Imagen para decodificar una cadena que hayas copiado de una URL de datos, una respuesta de API o un archivo CSS.
Para codificar, arrastra un JPG, PNG, WebP, GIF, SVG, BMP, ICO o AVIF al área de carga o haz clic para seleccionar desde tu dispositivo. La imagen se previsualiza en la parte superior de la tarjeta de resultados.
Se generan cinco fragmentos listos para pegar: la URL de datos completa, el Base64 sin procesar (sin prefijo), CSS background-image, etiqueta HTML <img> y imagen en Markdown. Haz clic en Copiar en el que desees.
Cambia a Base64 → Imagen, pega una URL de datos completa o la porción Base64 sin procesar. La herramienta agrega automáticamente relleno a cadenas cortas y asume PNG cuando falta el prefijo — haz clic en Decodificar para previsualizar.
Una vez decodificada, la tarjeta de previsualización muestra las dimensiones de la imagen y un tamaño de archivo estimado. Haz clic en Descargar para guardar los bytes originales de vuelta en el disco con la extensión correcta.
1. El FileReader.readAsDataURL() del navegador lee el archivo de imagen como binario. 2. Agrupa los bytes en bloques de 3 (24 bits) y vuelve a codificar cada bloque como 4 caracteres ASCII. 3. El alfabeto de 64 caracteres es A-Z, a-z, 0-9, más '+' y '/' (con '=' para el relleno). 4. La salida se precede con 'data:<mime>;base64,' para convertirlo en una URL de datos utilizable. 5. La decodificación revierte cada paso: elimina el prefijo, normaliza las variantes seguras para URL, rellena a un múltiplo de 4. 6. Los bytes decodificados se envuelven en un Blob y se exponen a través de createObjectURL — o simplemente se utilizan como la URL de datos directamente.
El 33% de sobrecarga de tamaño está incorporado en las matemáticas: 3 bytes de binario se convierten en 4 bytes de ASCII, una relación de 4/3. Esa es una base dura — no hay una variante Base64 comprimida de uso generalizado. El prefijo MIME en una URL de datos no es una decoración opcional: los navegadores, los renderizadores de Markdown y los clientes de correo electrónico lo utilizan para decidir cómo renderizar los bytes. Si pegas Base64 sin el prefijo 'data:image/...', esta herramienta predetermina a PNG, que es una suposición segura para capturas de pantalla e íconos, pero puede producir una vista previa corrupta si la fuente era en realidad JPG. La mejor práctica es mantener el formato completo de la URL de datos siempre que copies o pegues.
Referencia: MDN — URLs de datos
| Caso de uso | Mejor fragmento para copiar |
|---|---|
Incluir un ícono pequeño directamente en CSS | Copia el fragmento de background-image de CSS. Elimina una solicitud HTTP para íconos de menos de ~5 KB. Funciona bien para spinners, marcas de verificación, íconos estilo sprite. |
Incrustar una imagen en una respuesta JSON o REST API | Copia el fragmento de URL de datos. El receptor puede pegarlo directamente en <img src> o un fondo CSS. Común para aplicaciones de chat, capturas de pantalla y cargas de avatares. |
Pegar una captura de pantalla en una publicación de blog Markdown o un problema de GitHub | Copia el fragmento de imagen Markdown. Se renderiza en línea sin subir a un CDN. Algunos renderizadores de Markdown (GitHub) rechazan URLs de datos muy grandes — mantenlo pequeño. |
Decodificar una cadena Base64 de un correo electrónico o API en un archivo utilizable | Cambia a Base64 → Imagen, pega la cadena, presiona Decodificar, luego Descargar. Funciona también para Base64 en bruto — predetermina a PNG cuando falta el MIME. |
Recorta el sujeto de cualquier foto con IA en el dispositivo — no se requiere carga.
Reduce archivos JPG, PNG o WebP en tu navegador con un control deslizante de calidad interactivo.
Ajusta, filtra, rota y recorta fotos en el navegador — sin subidas, sin marca de agua.
Compón memes y collages de capturas de pantalla con capas reales — pega, arrastra, recorta, subtitula, exporta.
Última actualización