Conversor de imagen a Base64

Cómo convertir una imagen a Base64

Para convertir una imagen a Base64, suelta la imagen en el recuadro de la sección Archivos e imágenes, debajo del conversor de texto. La cadena Base64 aparece al momento, con el prefijo data: por defecto para que sea un data URI listo para usar, y puedes copiarla con un clic. La imagen se lee dentro de tu navegador y no se sube nunca.

¿Qué es un data URI de imagen?

Un data URI guarda un archivo directamente dentro de una dirección web, con la forma data:image/png;base64, seguida del Base64 del archivo. El navegador lo muestra como una imagen normal, sin hacer una petición aparte. Este es uno completo y válido: un PNG de 1 por 1 píxel rojo. data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4nGP4z8DwHwAFAAH/iZk9HQAAAABJRU5ErkJggg==

Cómo usarlo

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4nGP4z8DwHwAFAAH/iZk9HQAAAABJRU5ErkJggg==" alt="">

.icono { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4nGP4z8DwHwAFAAH/iZk9HQAAAABJRU5ErkJggg=="); }

Cuándo tiene sentido una imagen en Base64

• Iconos diminutos y marcadores de posición, de menos de unos 5 KB, donde ahorrar una petición vale más que el peso extra.
• Correos HTML y páginas de un solo archivo, que deben funcionar sin ningún archivo externo.
• JSON o cargas de API que solo admiten texto, como enviar una foto de perfil a un servicio.
• Prototipos y demos, donde quieres un único archivo que simplemente funcione.

Cuándo evitarlo

Base64 hace que un archivo pese un 33 % más y el navegador no puede guardar la imagen en caché por separado de la página. Con fotos grandes, mantén archivos de imagen normales y comprímelos antes. Reducir la imagen antes de convertirla, por ejemplo con el compresor de imágenes, es la forma más fácil de mantener corta la cadena.

Privado por diseño

La conversión se hace en tu navegador. Lo que escribes, pegas o sueltas no se sube nunca, algo importante cuando el texto contiene tokens, datos personales o archivos internos.