Los resultados se ofrecen solo con fines informativos y pueden contener errores. Verifica la información importante de forma independiente. El uso de esta herramienta es bajo tu propia responsabilidad.
Qué hace esta herramienta
El Convertidor de Imagen a Base64 transforma un archivo de imagen en una data URL: una sola línea de texto que empieza por data:image/png;base64, (o el tipo de tu archivo) seguida de los bytes de la imagen codificados en Base64. Elige un PNG, JPG, GIF, SVG, WebP o cualquier otra imagen y el texto aparece junto con una vista previa, listo para copiar.
El archivo se lee con el FileReader del navegador, así que nunca se sube a ningún servidor. Una data URL se puede usar en cualquier sitio donde funcione una dirección de imagen normal: en un <img src>, en background-image: url(...) de CSS, en un payload JSON o en una plantilla de correo. Base64 hace que los datos ocupen aproximadamente un tercio más que el archivo original, así que es más adecuado para imágenes pequeñas.
Cuándo usarla
- Incrustar un icono o un logo pequeño en el CSS para que la página haga una petición menos.
- Meter una imagen dentro de un único archivo HTML autocontenido, como un informe o una demo.
- Enviar una imagen en una petición a una API JSON que no acepta subidas multipart.
- Añadir una imagen en línea a una firma de correo HTML o a un fixture de pruebas.
Ejemplo práctico
Entrada
pixel.png (1 × 1 px, azul, 69 bytes)Salida
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mOwbvoGAAKvAbSJsn7VAAAAAElFTkSuQmCCPreguntas sobre esta herramienta
¿Por qué el texto Base64 ocupa más que mi imagen?
Base64 escribe cada 3 bytes como 4 caracteres de texto, así que el resultado es aproximadamente un 33 % más grande que el archivo. Una imagen de 30 KB se convierte en unos 40 KB de texto. La compresión Gzip o Brotli en el servidor recupera parte de esa diferencia.
¿Cuándo no conviene incrustar una imagen?
Evítalo con fotos grandes y con imágenes que se usan en muchas páginas. El navegador guarda en caché una sola vez un archivo de imagen normal, mientras que una imagen incrustada se descarga de nuevo con cada archivo HTML o CSS que la contiene.
¿Cómo uso el resultado en CSS?
Envuélvelo en url(): background-image: url("data:image/png;base64,...");. Para iconos SVG, un SVG codificado como URL suele ocupar menos que en Base64; la página Codificador de URL puede prepararlo.
¿Cómo vuelvo a convertir Base64 en una imagen?
Pega la data URL completa en la barra de direcciones del navegador y guarda la imagen, o decodifica la parte que va después de la coma con la herramienta Decodificador Base64 si necesitas los bytes sin procesar.
¿Esta herramienta es gratuita?
Sí, es gratis. Sin registro ni correo electrónico. Obtén el resultado en esta página.
¿Cómo obtengo el resultado?
Usa la herramienta en esta página. El resultado aparece aquí, sin envío por correo electrónico.