Convierte imagenes a Base64 - al instante, privado, listo para copiar.

Base64 es una codificacion de binario a texto que representa datos binarios usando 64 caracteres ASCII (A-Z, a-z, 0-9, +, /). Convierte cada 3 bytes de datos binarios en 4 caracteres ASCII. Un icono de 3 KB se convierte en una cadena de texto de 4 KB. La codificacion existe porque muchos sistemas - correo electronico (SMTP), APIs JSON, valores CSS url(), atributos HTML - solo aceptan texto, no binario sin procesar. Base64 cierra esa brecha convirtiendo cualquier archivo en una representacion de texto segura.

Usa Base64 para imagenes menores de 10 KB - favicons, iconos pequenos, logos simples, pixeles de rastreo 1x1 y elementos UI pequenos. A ese tamano, la sobrecarga de la solicitud HTTP (busqueda DNS, handshake TCP, negociacion TLS) cuesta mas que el aumento del 33% por Base64. Para imagenes mayores de 10 KB, los archivos externos son mejores porque los navegadores pueden cachearlos independientemente, cargarlos en paralelo y evitar inflar tu CSS o HTML. Las plantillas de correo HTML son la excepcion - siempre usa Base64 en linea porque los clientes de correo bloquean la carga de imagenes externas por defecto.

Base64 aumenta el tamano del archivo exactamente un 33% (relacion 4/3) mas algunos bytes de relleno. Un PNG de 9 KB se convierte en una cadena Base64 de 12 KB. Un JPG de 30 KB se convierte en 40 KB de texto. Esta sobrecarga se acumula cuando la cadena Base64 esta dentro de un archivo CSS o HTML que tambien se comprime con gzip para la transferencia - gzip recupera algo de la inflacion (tipicamente 10-15%), pero el tamano decodificado en el DOM del navegador sigue siendo el 33% mas grande. Para un URI de datos, agrega otros 20-30 bytes para el prefijo data:image/png;base64,.

Un URI de datos incluye un encabezado que le dice al navegador como interpretar los datos: data:image/png;base64,iVBORw0KGgo... El encabezado especifica el tipo MIME (image/png) y la codificacion (base64). Base64 sin formato es solo la cadena codificada sin el encabezado: iVBORw0KGgo... Usa URIs de datos en valores CSS background-image url() y atributos HTML src. Usa Base64 sin formato cuando envies datos de imagen a APIs que esperan el payload sin el prefijo URI de datos, o al almacenar en bases de datos donde el tipo MIME se rastrea por separado.

Mantiene las imagenes Base64 por debajo de 10 KB (tamano original del archivo) para incrustar en CSS. Google Lighthouse marca el CSS que bloquea el renderizado, y una imagen Base64 de 100 KB dentro de tu hoja de estilos agrega 133 KB de texto sin comprimir a cada carga de pagina. Para etiquetas img HTML en linea, 20-30 KB es un limite razonable - mas alla de eso, el documento HTML se vuelve demasiado pesado para un First Contentful Paint rapido. Las plantillas de correo pueden ir mas alto (hasta 100 KB por imagen) porque no hay alternativa de archivo externo, pero mantiene el tamano total del correo por debajo de 102 KB para evitar el recorte de Gmail.

Todos los navegadores modernos soportan URIs de datos - Chrome, Firefox, Safari, Edge y todos los navegadores moviles desde 2012 en adelante. Internet Explorer 8 agrego soporte parcial con un limite de 32 KB por URI de datos. IE 9+ elimino ese limite. La unica restriccion practica hoy es que algunas configuraciones de Content Security Policy (CSP) bloquean URIs data: por defecto. Si tu sitio usa un CSP estricto, agrega data: a la directiva img-src para permitir imagenes Base64 en linea.

Ninguna imagen sale de tu dispositivo. La conversion usa la API FileReader del navegador para leer el archivo localmente y generar la cadena Base64 completamente en JavaScript. Abre las herramientas de desarrollador del navegador (F12), cambia a la pestana Red y convierte una imagen - veras cero solicitudes salientes. La herramienta funciona con HTML estatico y JavaScript sin backend de servidor. Cierra la pestana y todos los datos se eliminan de la memoria.

Si, pero SVG ya es XML basado en texto, asi que codificar un SVG en Base64 a menudo es innecesario. Un URI de datos SVG sin formato (data:image/svg+xml,...) sin Base64 es tipicamente 20-30% mas pequeno porque omites la sobrecarga de codificacion del 33%. Esta herramienta proporciona la version Base64 para compatibilidad con sistemas que requieren Base64, pero para imagenes de fondo CSS, considera usar el SVG sin formato en un url() con codificacion de porcentaje. La version Base64 funciona en todas partes, mientras que la version sin codificar falla en algunos clientes de correo antiguos.