Herramientas
Imagen a Base64
Convertir imagen a Base64
Convierte una imagen en una cadena Base64 lista para pegar en tu HTML o CSS.
Suelta aquí tus imágenes
o haz clic para elegir archivos, o pega desde el portapapeles
Sobre esta herramienta
Codificar una imagen en Base64 permite incrustarla directamente en el código, sin un archivo aparte: un icono pequeño dentro de una hoja CSS, un logotipo en la firma HTML de un correo, una imagen dentro de un JSON para una API o un recurso en una plantilla que debe funcionar sin conexión. Así te ahorras una petición al servidor o un archivo adjunto.
Suelta una o varias imágenes en la zona de carga, elígelas con un clic o pégalas con Ctrl+V. Cada imagen aparece con su miniatura, su peso y el código en un cuadro de texto. Pulsa «Copiar data URI» para obtener la cadena completa (data:image/png;base64,…) lista para un src o un url() de CSS, o «Copiar Base64» si solo necesitas los datos codificados.
La codificación se hace en tu navegador: las imágenes no se envían a ningún servidor. Se admiten archivos de imagen de hasta 5 MB cada uno para evitar que la página se bloquee. Recuerda que el Base64 ocupa alrededor de un 33 % más que el archivo original, así que conviene reservarlo para imágenes pequeñas. La herramienta no redimensiona ni comprime la imagen.
Preguntas frecuentes
¿Qué diferencia hay entre Base64 y data URI?
El Base64 son solo los datos codificados. El data URI añade delante el tipo de archivo (data:image/png;base64,), que es lo que necesitas para usarlo en un src de HTML o un url() de CSS.
¿Cómo uso una imagen Base64 en HTML o CSS?
En HTML, pega el data URI en el atributo src de una etiqueta img. En CSS, ponlo dentro de url(), por ejemplo en background-image.
¿Por qué el código ocupa más que la imagen?
Base64 representa cada 3 bytes con 4 caracteres, así que el texto resultante es aproximadamente un tercio más grande que el archivo original.
¿Cuándo no conviene usar imágenes en Base64?
Con imágenes grandes o que se repiten en muchas páginas: aumentan el tamaño del HTML o CSS y el navegador no puede guardarlas en caché por separado.