Cómo funciona la conversión de imagen a Base64
Toda la conversión se ejecuta en tu navegador usando la File API y la función nativa btoa — no se descarga ninguna librería de códec y ningún servidor ve la imagen. Aquí está el proceso, de principio a fin:
- Sueltas o seleccionas una imagen. El navegador la lee como un Blob desde tu disco local, sin copiar bytes a ningún servidor.
- El archivo se lee en fragmentos de 1 MB y los bytes de cada fragmento se van añadiendo a una cadena binaria. El procesamiento por fragmentos evita que imágenes grandes desborden la pila de llamadas de JavaScript.
- La cadena binaria se pasa a btoa, que convierte cada tres bytes en cuatro caracteres Base64 del alfabeto A–Z, a–z, 0–9, más /.
- El tipo MIME del archivo (image/png, image/jpeg, etc.) se lee del objeto File y se antepone como prefijo data:, produciendo una URI data:image/…;base64,… completa.
- La página ensambla cuatro salidas a partir de esa URI — la URI de datos completa, el Base64 sin prefijo, una etiqueta
lista para pegar y un fragmento CSS background-image — cada una con su propio botón de copia.
¿Por qué codificar una imagen como URI de datos?
- Incrustar un logo o icono pequeño como URI de datos elimina una petición de red adicional, por lo que la página o el correo muestra su primer fotograma un poco antes.
- Una página o hoja de estilos con imágenes inline es autocontenida. Funciona sin conexión y puedes copiarla sin arrastrar una carpeta de recursos junto con ella.
- Muchos clientes de correo bloquean por defecto las imágenes remotas enlazadas. Incrusta un logo en Base64 y aparece en el momento en que se abre el mensaje, sin petición remota necesaria.
- La codificación ocurre completamente en tu navegador, por lo que las imágenes sensibles nunca viajan a un servidor de terceros. Eso incluye capturas de pantalla, escaneos de documentos y diagramas internos.
Usos comunes de las imágenes Base64
Las URI de datos aparecen donde una imagen es lo suficientemente pequeña como para que una petición separada cueste más que la inflación de tamaño del ~33% que añade Base64. Tres patrones surgen constantemente:
- Iconos CSS inline: un sprite o icono de 1–2 KB insertado en una hoja de estilos como background-image: url(data:…) para que la regla sea completamente autocontenida.
- Firmas de correo y boletines: un logo incrustado como
con una URI data: src se muestra incluso cuando el cliente bloquea imágenes remotas.
- Incrustación en herramientas de build: bundlers como Webpack y Vite incrustan activos por debajo de un umbral de bytes automáticamente, y esta herramienta te permite previsualizar exactamente cómo luce esa salida.
¿Cómo luce una imagen Base64?
Toma un PNG transparente de 1×1 píxel. Sus bytes sin procesar son solo 67 bytes, pero codificado se convierte en la cadena iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+M8AAAMEAYC0aGgAAAAASUVORK5CYII=, y la URI de datos completa es data:image/png;base64,iVBORw0KGgo…. Nota que la forma codificada es aproximadamente un tercio más grande que el original. Ese es el compromiso por hacer que los datos binarios sean seguros para incrustar directamente en texto.
¿Mi imagen se sube a algún servidor?
No. La conversión usa la File API del navegador y la función nativa btoa para codificar la imagen completamente en tu dispositivo. Puedes comprobarlo tú mismo: abre las herramientas de desarrollo de tu navegador, cambia al panel de Red y convierte una imagen — las únicas peticiones que verás son la carga de la página y los anuncios. Nada con forma de imagen se envía a un servidor, lo que hace que sea seguro para capturas de pantalla, documentos de identidad y diagramas internos.
¿Por qué la salida Base64 es más grande que mi imagen original?
Base64 representa cada tres bytes de datos binarios con cuatro caracteres ASCII, por lo que el texto codificado es aproximadamente un 33% más grande que el archivo fuente. El indicador de tamaño de la URI de datos en esta página muestra la longitud exacta inflada. Por eso las URI de datos solo tienen sentido para imágenes pequeñas — incrustar una foto de 2 MB inflaría tu HTML o CSS mucho más de lo que habría costado una petición separada. Como regla general, incrusta imágenes de menos de 4 KB aproximadamente y enlaza a cualquier cosa más grande.
¿Qué formatos de imagen puedo convertir?
Cualquier formato que tu navegador reconozca como imagen funciona, porque la herramienta lee los bytes en bruto en lugar de decodificar la imagen. Eso incluye PNG, JPEG, GIF, WebP, SVG y BMP. El tipo MIME se lee directamente del archivo, así que el prefijo data: siempre coincide con el formato real — un JPEG produce data:image/jpeg y un SVG produce data:image/svg+xml. SVG merece una nota especial: ya es texto, por lo que para SVGs una URI de datos codificada como URL suele ser más pequeña que la versión Base64, aunque esta herramienta emite la forma Base64 por coherencia.
Suelta una imagen, copia la URI de datos o el fragmento que necesitas, y pégalo en tu HTML, CSS o plantilla de correo. Cada byte permanece en tu dispositivo. Sin subida, sin cuenta, sin petición al servidor.