Imagen a Base64
Convierte imágenes a texto Base64 para incrustar en código.
Convertir imágenes a Base64 para desarrollo web
Base64 es un sistema de codificación que convierte datos binarios (como imágenes) en una cadena de texto ASCII. Esto permite incrustar imágenes directamente en código HTML, hojas de estilo CSS o archivos JavaScript sin necesidad de un archivo externo separado. Es especialmente útil para iconos pequeños, logos y elementos de UI que se benefician de la carga inline, eliminando una petición HTTP adicional al servidor.
La codificación Base64 incrementa el tamaño de los datos aproximadamente un 33% comparado con el archivo binario original. Por esta razón, se recomienda su uso principalmente para imágenes pequeñas (menos de 10 KB). Para imágenes más grandes, es generalmente más eficiente servirlas como archivos separados aprovechando el caché del navegador. Los data URIs con Base64 se pueden usar en atributos src de imágenes HTML, en propiedades background-image de CSS, y en cualquier lugar que acepte una URL.
Nuestra herramienta convierte cualquier imagen a Base64 instantáneamente en tu navegador. No se sube nada a ningún servidor. Obtienes tres formatos de salida: el string Base64 puro, el data URI completo con el prefijo MIME para uso directo, y una etiqueta HTML img lista para pegar en tu código. Cada formato incluye botón de copiar al portapapeles con un clic.
Preguntas frecuentes
¿Por qué el Base64 es más grande que el archivo original?
Base64 codifica cada 3 bytes de datos binarios en 4 caracteres ASCII, lo que resulta en un incremento de aproximadamente 33%. Esto es inherente al sistema de codificación y es el costo de convertir datos binarios a texto plano.
¿Cuándo debo usar imágenes en Base64?
Es ideal para imágenes pequeñas como iconos (menos de 10 KB), correos electrónicos HTML, aplicaciones offline, o cuando quieres reducir el número de peticiones HTTP. Para imágenes grandes, es mejor servirlas como archivos separados.
¿Puedo usar el data URI en CSS?
Sí. Puedes usar el data URI completo en la propiedad background-image de CSS, por ejemplo: background-image: url(data:image/png;base64,...). Esto es útil para fondos, sprites y decoraciones que no necesitan carga externa.