Imagen a Base64

Convertir un archivo en una cadena de texto

Aquí partes de un archivo que ya tienes —un PNG, un JPG, un SVG— y obtienes su equivalente escrito con letras y números: la dirección archivo → texto. El resultado es un data URI, una dirección autosuficiente que no apunta a ningún servidor porque lleva la imagen dentro. Pegarlo en tu código equivale a colocar el archivo ahí mismo.

Si tu situación es la opuesta, es decir, si alguien te ha pasado una cadena interminable y quieres recuperar la imagen que esconde, esa tarea la resuelve Base64 a imagen.

Cuándo incrustar merece la pena

La ventaja es siempre la misma: una petición HTTP menos. El navegador no tiene que abrir una conexión, pedir el archivo y esperar la respuesta, porque la imagen ya venía en el documento que estaba leyendo. En recursos minúsculos ese ahorro de ida y vuelta pesa más que los bytes de más.

• Iconos y logotipos diminutos que aparecen en todas las páginas: flechas, marcadores, indicadores de estado.
• Correos en HTML, donde muchos clientes bloquean las imágenes externas y una imagen incrustada se ve sin que el destinatario tenga que autorizar nada.
• Fondos y texturas de CSS que se repiten en toda la interfaz y cuya carga tardía provocaría un parpadeo feo.
• Datos que viajan en JSON: firmas manuscritas, avatares generados o capturas que deben llegar en la misma respuesta que el resto de la información.
• Documentos que deben ser autónomos, como un informe exportado en un único archivo HTML que se abre sin conexión.

Y cuándo es una mala idea

Con fotografías o ilustraciones de cierto tamaño, incrustar suele empeorar las cosas por cuatro motivos que rara vez se cuentan juntos:

• Pesa un 33 % más. Esa penalización es inherente a la codificación y no hay forma de esquivarla.
• Desaparece la caché independiente. Una imagen enlazada se descarga una vez y el navegador la reutiliza en todas las páginas; incrustada, se vuelve a descargar con cada documento que la contiene.
• Infla el HTML o el CSS. Son archivos que bloquean el pintado inicial, así que un data URI grande retrasa el momento en que el visitante ve algo, aunque la imagen esté al final de la página.
• Pierdes flexibilidad. Adiós a la carga diferida, a servir distintos tamaños según la pantalla y a cambiar la imagen sin volver a tocar el código.

Regla práctica: por debajo de unos pocos kilobytes, incrusta sin miedo. Por encima, sirve el archivo y limítate a enlazarlo.

Prepara la imagen antes de convertirla

Como el tamaño lo decide todo, media hoja de trabajo previa cambia el resultado por completo. Ajusta primero las dimensiones reales a las que la imagen se va a mostrar con el redimensionador: no tiene sentido incrustar 2000 píxeles de ancho para pintar 64. Después comprime el archivo o pásalo a WebP, que para el mismo aspecto visual suele ocupar bastante menos. Cada byte que ahorras antes son aproximadamente 1,33 bytes que no acaban en tu código.

El caso aparte de los SVG

Los iconos vectoriales son el mejor candidato posible: describen formas con unas pocas líneas de texto, así que su versión codificada sigue siendo minúscula y además se ve nítida en cualquier pantalla. Un detalle que ahorra bytes: al ser ya texto, un SVG puede incrustarse sin pasar por Base64, escapando únicamente los caracteres que darían problemas dentro de la cadena. La versión Base64 es más cómoda y compatible; la otra, algo más ligera.

Cómo usar la herramienta

1. Arrastra la imagen sobre la zona de subida o haz clic para elegirla.
2. La cadena aparece al momento, acompañada de ejemplos de uso listos para HTML y para CSS.
3. Copia lo que necesites y pégalo en tu proyecto.

Si trabajas con texto en lugar de imágenes, el codificador y decodificador Base64 hace lo propio con cualquier cadena. Tienes el catálogo completo en herramientas de archivos.