Convertidor Imagen → Base64

Codifica cualquier imagen a una URI de datos Base64, o pega una URI de datos para decodificarla de vuelta a una imagen. Copia el resultado o toma el fragmento CSS url(). Nada abandona tu dispositivo.

Cómo funciona Imagen a Base64

Convertir imagen a Base64 lee tu archivo de imagen y lo codifica como una URI de datos Base64 que puedes incrustar directamente en HTML, CSS o JSON sin necesitar una solicitud de archivo separada. La conversión usa la API FileReader en tu navegador; no se envía ningún byte de tu imagen a un servidor. También puedes pegar una cadena Base64 para decodificarla y previsualizar la imagen, todo localmente.

Una URI de datos Base64 es aproximadamente un 33% más grande que el original binario porque cada grupo de tres bytes se expande a cuatro caracteres ASCII. Este aumento de tamaño es el compromiso esperado por la comodidad de incrustar una imagen en un documento o hoja de estilos. La herramienta te muestra tanto la cadena Base64 sin procesar como un fragmento listo para usar con la etiqueta img de HTML y un fragmento de background-image de CSS para copiar y pegar rápidamente en tu proyecto.

Escrito por Bastien Sulyan

Cómo usar Imagen a Base64, paso a paso

Arrastra un archivo de imagen al área de carga o haz clic para explorar. Formatos aceptados: JPEG, PNG, WebP, GIF, SVG.
La URI de datos Base64 aparece inmediatamente en el campo de salida.
Copia la cadena Base64 sin procesar, o usa el fragmento preformateado de la etiqueta img de HTML o el fragmento de background-image de CSS.
Para decodificar, pega una cadena Base64 en el campo de entrada y cambia al modo de decodificación para previsualizar la imagen.
Haz clic en el botón de copiar junto a cualquier fragmento para copiarlo al portapapeles.

Casos de uso comunes

Un desarrollador de frontend incrusta un icono pequeño como URI de datos en un archivo CSS para eliminar una solicitud HTTP adicional.
Un desarrollador incrusta un spinner de carga diminuto como atributo src en Base64 para que la imagen de marcador de posición esté disponible antes de que cargue el paquete JavaScript.
Un ingeniero de control de calidad copia el Base64 de una imagen de prueba para pegarlo directamente en una carga JSON para una prueba de API.
Un creador de plantillas de correo electrónico incrusta el logotipo de una firma como URI de datos Base64 porque algunos clientes de correo bloquean las solicitudes de imágenes externas.

Preguntas frecuentes

¿Por qué la salida Base64 es aproximadamente un tercio más grande que mi archivo original?

La codificación Base64 representa cada tres bytes binarios como cuatro caracteres ASCII (una relación 4/3). Una imagen de 100 KB en binario se convierte en aproximadamente 133 KB como cadena Base64. Esto es inherente al esquema de codificación, no una limitación de la herramienta.

¿El contenido de la imagen se transmite a un servidor durante la codificación?

No. La API FileReader lee el archivo binario desde tu disco local y pasa el resultado directamente a la función de codificación JavaScript dentro de tu pestaña del navegador. Los datos de la imagen no salen de tu dispositivo.

¿Puedo usar la salida de URI de datos en cualquier contexto HTML o CSS?

Sí. Una URI de datos que comienza con data:image/jpeg;base64, seguida de la cadena codificada, puede usarse como atributo src de una etiqueta img o como valor url() en una propiedad background-image de CSS. Todos los navegadores modernos admiten URIs de datos. Las URIs de datos muy grandes pueden ralentizar la renderización de la página, por lo que incrustar generalmente se reserva para imágenes pequeñas de unos pocos kilobytes.

¿La herramienta admite GIFs animados?

La herramienta codifica el contenido binario completo de cualquier archivo que proporciones, incluidos los GIFs animados. La URI de datos resultante, cuando se usa como src de una etiqueta img, reproducirá la animación en los navegadores que admiten animación GIF.

¿Cómo hago el proceso inverso y decodifico una cadena Base64 de vuelta a una imagen?

Cambia la herramienta al modo de decodificación, pega tu cadena Base64 (con o sin el prefijo data:) y la herramienta la decodificará y ofrecerá la imagen binaria como descarga, además de mostrar una vista previa.

Herramientas relacionadas

Mantén todo en local, explora herramientas complementarias.

Todas las herramientas de imagen