Convertir Imagen a Base64
Codifica imágenes a texto Base64 para CSS, HTML y emails.
Para qué sirve
De imagen a texto en un clic
Sin servidor
La codificación ocurre en tu navegador. Tus imágenes nunca salen de tu dispositivo.
Lista para pegar
Genera la data URI completa con prefijo MIME, lista para usar en HTML, CSS o JSON.
Todos los formatos
Compatible con JPG, PNG, WebP, GIF, SVG y cualquier imagen que soporte el navegador.
Instantáneo
La codificación es inmediata, sin subir archivos ni esperar respuestas del servidor.
Cómo funciona
Tres pasos, sin complicaciones
Sube tu imagen
Arrastra o selecciona la imagen que quieres codificar. Compatible con JPG, PNG, WebP, GIF y SVG.
Copia la cadena Base64
La herramienta genera automáticamente la cadena Base64 y la data URI completa lista para usar.
Úsala en tu código
Pega la data URI en el atributo src de un img, en background-image de CSS o en el cuerpo de un email HTML.
Preguntas frecuentes
¿Tienes dudas?
Base64 es un esquema de codificación que convierte datos binarios (como el contenido de un archivo de imagen) en una cadena de caracteres ASCII imprimibles. Esto permite incluir datos de imagen directamente en texto, como en HTML, CSS o JSON, sin referenciar un archivo externo.
Base64 es útil para iconos pequeños en CSS (evita una petición HTTP extra), para imágenes en emails HTML (algunos clientes de email bloquean imágenes externas), y para imágenes en aplicaciones que se ejecutan sin servidor o en entornos offline. No es recomendable para imágenes grandes.
Base64 representa cada grupo de 3 bytes de datos binarios con 4 caracteres ASCII. Esto significa que cada byte de datos originales requiere 1,33 bytes en Base64, resultando en un incremento de aproximadamente un 33% en tamaño. Además, el navegador debe decodificar la cadena antes de renderizar, lo que tiene un costo de CPU.
Una data URI sigue el formato: data:[tipo MIME];base64,[datos]. Por ejemplo, para un PNG sería: data:image/png;base64,iVBORw0KGgo... El tipo MIME indica al navegador cómo interpretar los datos. Los tipos más comunes son image/png, image/jpeg, image/webp e image/svg+xml.
Sí, negativamente para imágenes grandes. Las imágenes Base64 no se pueden cachear por separado en el navegador (se cachean junto al HTML o CSS que las contiene), aumentan el tamaño del documento y requieren decodificación. Para imágenes pequeñas como iconos (menos de 2-3 KB), el beneficio de eliminar una petición HTTP puede compensar el costo.
Base64 en desarrollo web: cuándo usarlo y cuándo evitarlo
La codificación Base64 fue definida en RFC 2045 (1996) como parte del estándar MIME para emails. En el contexto web, las data URIs (RFC 2397, 1998) permitieron incrustar datos de imágenes directamente en HTML y CSS. Esto fue especialmente valioso en los primeros años de HTTP/1.1, cuando cada petición HTTP tenía un costo significativo en latencia, y reducir el número de peticiones era una técnica clave de optimización.
Con la llegada de HTTP/2 y HTTP/3, que permiten multiplexación de peticiones, el argumento de rendimiento para Base64 se ha debilitado considerablemente. Sin embargo, Base64 sigue siendo la solución estándar para incrustar imágenes en emails HTML (donde los clientes de email a menudo bloquean imágenes externas), en documentos PDF generados por código, y en aplicaciones que necesitan ser completamente autocontenidas (como apps Electron o páginas guardadas localmente).
Una regla práctica en desarrollo web moderno: usa Base64 para imágenes menores de 2-3 KB (iconos SVG, spinners, pequeños separadores decorativos) donde el ahorro de una petición HTTP justifica el overhead de tamaño. Para imágenes mayores, usa archivos referenciados por URL y aprovecha el caché del navegador y HTTP/2 multiplexing.