Herramienta de Conversión de Imagen Base64
Convierte entre imágenes y codificación Base64, soporta arrastrar y soltar y vista previa en tiempo real
Arrastra imagen aquí, o haz clic para seleccionar archivo
Soporta JPG, PNG, GIF, WebP, SVG y más
¿Qué es la Codificación de Imagen Base64?
La herramienta de imagen a Base64 convierte archivos de imagen en texto Base64 o URL de datos, y también permite decodificar esas cadenas para volver a ver la imagen. Es práctica para iconos pequeños, marcadores de posición, plantillas de correo, fondos CSS, pruebas de API y demostraciones donde no conviene adjuntar un archivo separado. Base64 no comprime: normalmente aumenta el tamaño de la carga y puede perjudicar la caché si se usa con fotos grandes o recursos repetidos. La herramienta sirve para convertir, inspeccionar y depurar antes de decidir entre datos incrustados, CDN o URL de imagen normal.
Uso
Cómo usar
- Arrastra o haz clic para subir la imagen; el tipo y las dimensiones se detectan automáticamente.
- Elige el formato de salida: Data URL (listo para código) o Base64 puro.
- Haz clic en el botón copiar para pegar el resultado codificado donde lo necesites.
- Para la conversión inversa, pega la cadena Base64 y haz clic en convertir para descargar la imagen.
De Base64 a imagen
- Pega un data URL o una cadena Base64 sin procesar en el cuadro de entrada y conviértelo para previsualizar la imagen decodificada antes de descargarla.
- Si la decodificación falla, comprueba que el texto Base64 esté completo y que cualquier prefijo data:image/... tenga el formato correcto.
De imagen a Base64
- Elige Data URL cuando el resultado se pegará directamente en HTML o CSS, y Base64 puro cuando otro sistema ya almacene el tipo MIME por separado.
- Mantén las imágenes Base64 pequeñas; las imágenes grandes aumentan el tamaño del texto en aproximadamente un tercio y pueden dificultar el mantenimiento de payloads en HTML, CSS o JSON.
Casos de uso
Principio técnico
Una imagen codificada en Base64 es un Data URI según lo definido en RFC 2397: el prefijo de esquema data:, el tipo MIME como image/png, el literal ;base64, y luego la carga útil construida con el alfabeto de 64 caracteres A-Z, a-z, 0-9, +, /, con = como relleno terminal. La codificación toma el flujo binario de tres bytes a la vez y emite cuatro caracteres, por lo que la carga útil crece en un factor fijo de 4/3 (aproximadamente 33%) más uno o dos caracteres de relleno cuando el número de bytes no es múltiplo de tres. En el navegador, la codificación comienza con FileReader.readAsDataURL, que transmite el archivo a través del mismo pipeline y devuelve la URL data: completa, lista para insertar en un <img src> o en un url() de background-image de CSS. Las primitivas btoa y atob solo trabajan con cargas útiles ya binarias (solo latin-1, por lo que los bytes binarios deben convertirse mediante Uint8Array). La decodificación de vuelta a una imagen visible pasa por atob a un Uint8Array, luego a un Blob con el tipo MIME original, y el handle URL.createObjectURL se convierte en un recurso HTTP descargable normal. El compromiso práctico no es el ancho de banda sino la caché. Cada aparición de la carga útil se duplica dondequiera que aparezca el HTML, CSS o JSON, por lo que el recurso no puede almacenarse en caché por separado, no puede tener su propio ETag y se vuelve a descargar con cada documento padre. Las reglas estrictas de Content-Security-Policy también bloquean los data: URI a menos que 'data:' esté explícitamente listado en img-src o style-src. Desde que se implementó la multiplexación HTTP/2, incrustar iconos pequeños rara vez supera a una solicitud separada, por lo que la regla práctica moderna es incrustar solo por debajo de ~2 KB y mantener las imágenes principales y sprites reutilizables como archivos almacenables en caché.
- Esquema Data URI: formato RFC 2397 data:[<mime>][;base64],<payload>; la coma es obligatoria y es el error más común al copiar y pegar.
- Sobrecosto de codificación: 3 bytes binarios se convierten en 4 caracteres ASCII, por lo que la carga útil crece en un factor de 4/3 (~33%) más hasta 2 caracteres de relleno '='.
- APIs del navegador: FileReader.readAsDataURL para archivos; btoa/atob para cargas útiles ya en texto (solo latin-1, por lo que datos binarios necesitan un puente Uint8Array).
- Ruta de decodificación: atob → Uint8Array → new Blob([buf], {type}) → URL.createObjectURL devuelve una URL de recurso descargable normal en lugar de una cadena congelada.
- Problema con CSP: una política estricta de img-src o default-src bloquea data: a menos que la palabra clave esté explícitamente listada, lo que rompe silenciosamente las imágenes incrustadas en producción.
- Compromiso de caché: los datos incrustados no tienen ETag ni entrada de caché independiente, por lo que la multiplexación HTTP/2 generalmente supera a la incrustación para cualquier cosa por encima de ~2 KB.
Ejemplos
Uso en HTML
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="píxel transparente de 1x1" width="16" height="16" />Uso en CSS
.icon-search {
width: 16px;
height: 16px;
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTYgMmE0IDQgMCAxIDAgMi4yNCA3LjMzbDMuMjEgMy4yMSAxLjQyLTEuNDItMy4yMS0zLjIxQTQgNCAwIDAgMCA2IDJ6Ii8+PC9zdmc+');
background-size: contain;
}Transmitir mediante una API JSON
POST /api/v1/avatar
Content-Type: application/json
{
"userId": 10086,
"avatar": {
"mimeType": "image/png",
"data": "iVBORw0KGgoAAAANSUhEUgAAAAUA..."
}
}
// Nota: Base64 aumenta la carga útil aproximadamente un 33 %; para archivos > 100KB es preferible multipart/form-data.Preguntas frecuentes
¿Se sube la imagen?
No. La imagen se lee con la API FileReader y se codifica en Base64 dentro de tu navegador. Los bytes nunca salen de tu dispositivo. Mira la pestaña Network durante la conversión para confirmarlo.
¿Por qué la cadena Base64 es ~33% más larga que el archivo?
Base64 representa 3 bytes de entrada como 4 caracteres ASCII, así que el tamaño codificado = ceil(file_size / 3) * 4. Eso supone alrededor de un 33% de sobrecarga, el coste de representar binario como texto imprimible.
¿Cómo uso el resultado en HTML o CSS?
Usa una URI de datos: <img src="data:image/png;base64,..."> en HTML o background-image: url(data:image/png;base64,...) en CSS. La página genera la URI data: completa por ti. Útil para activos pequeños insertados, pero infla el tamaño del HTML/CSS y se salta la caché de imágenes del navegador.
¿Cuál es el umbral de tamaño para insertar vs. enlazar?
Por debajo de ~5 KB, insertar suele ser mejor (ahorra una petición HTTP). Por encima de eso, conviene que el archivo sea un activo independiente por motivos de caché. Por encima de ~50 KB, insertar infla considerablemente tu HTML. Las herramientas de build usan distintos umbrales; webpack usa 8 KB por defecto.
¿Puedo decodificar una cadena Base64 de vuelta a una imagen?
Sí. Pega una URI data: o Base64 en bruto (con el tipo MIME image/*) y la página reconstruye la imagen y permite descargarla. Útil cuando encuentras una imagen insertada en el código fuente y quieres recuperar el archivo original.
¿Se admiten SVG y GIF animados?
Sí. SVG se puede codificar directamente o con texto codificado por URL (que es más corto que Base64 para SVG-XML). Los GIF animados se codifican como una única cadena Base64; el resultado sigue animándose. WebP, AVIF y otros formatos modernos funcionan igual.
¿Debería codificar fotos grandes en Base64 para correos electrónicos?
El propio correo ya codifica los adjuntos en MIME con Base64, así que no necesitas pre-codificarlos. Pegar una cadena Base64 en el cuerpo del mensaje solo lo agranda y lo hace ilegible para la mayoría de los clientes. Adjunta el archivo de la forma habitual.