Para convertir una imagen a Base64, suelta arriba un archivo PNG, JPG, WebP, GIF, SVG, AVIF, BMP o ICO y haz clic en «Convertir a Base64». Elige la salida que necesitas («Data URI», «Base64 puro», «Etiqueta <img>» o «Fondo CSS») y pulsa «Copiar todo». Se codifican los bytes originales, así que la calidad nunca cambia.
Cómo usar la herramienta Imagen a Base64
- 1
Añade una o varias imágenes
Suelta archivos PNG, JPG, WebP, GIF, SVG, AVIF, BMP o ICO en la zona de carga o haz clic para seleccionarlos. Puedes codificar varios archivos a la vez.
- 2
Haz clic en «Convertir a Base64»
Los bytes de cada archivo se leen en tu navegador y se codifican en Base64 tal cual, sin volver a comprimir la imagen.
- 3
Elige el formato de salida
En «Salida como», cambia entre «Data URI», «Base64 puro», «Etiqueta <img>» o «Fondo CSS» según dónde vaya a ir el código.
- 4
Copia y pega
Usa el botón «Copiar todo» junto a cada resultado y revisa el tamaño que se muestra, para saber cuánto añadirá la cadena a tu página u hoja de estilos.
Cuándo incrustar una imagen en HTML o CSS como Base64
Base64 convierte datos binarios en texto plano. Dentro de un data URI, ese texto puede sustituir a la URL de una imagen, de modo que la imagen viaja dentro del archivo HTML, CSS o JSON en lugar de ser una descarga aparte. Es práctico para iconos y logotipos pequeños en una hoja de estilos, imágenes en plantillas de correo HTML, demos y prototipos de un solo archivo, y cargas de API o archivos de configuración que solo aceptan texto.
El precio es el tamaño. Una cadena Base64 ocupa alrededor de un 33 % más que el archivo binario, y una imagen incrustada no se puede guardar en caché por separado, así que se vuelve a descargar cada vez que se descarga el archivo que la contiene. Por eso encaja mejor con imágenes pequeñas: un icono de 2 KB se convierte en unos 2,7 KB de texto, lo cual está bien, mientras que una foto grande inflaría tu página y es mejor servirla como archivo normal.
Como el conversor muestra el tamaño de cada resultado, puedes decidir caso por caso si incrustar una imagen en HTML o CSS o mantenerla como archivo normal.
Data URI, Base64 puro, etiqueta img o CSS: qué salida copiar
Un data URI en Base64 empieza por data:, seguido del tipo de medio del archivo, como image/png, luego ;base64, y el texto codificado. Pégalo en cualquier sitio donde se espere una URL: el atributo src de una imagen, un valor url() de CSS o un campo JSON. «Base64 puro» es solo el texto codificado sin ese prefijo, que es lo que piden muchas API y bibliotecas.
La salida «Etiqueta <img>» envuelve el data URI en un elemento de imagen HTML completo que puedes pegar directamente en una página, y la salida «Fondo CSS» te da una línea background-image lista para tu hoja de estilos. Las cuatro salen de la misma codificación, así que cambiar entre ellas no vuelve a procesar el archivo.
Convertir PNG a Base64 y JPG a Base64 funciona igual. Pasar un SVG a Base64 es útil cuando una herramienta no acepta código SVG en línea; el SVG codificado sigue siendo vectorial, así que se escala sin perder nitidez a cualquier tamaño.
Un codificador Base64 que mantiene tus archivos en privado
El codificador lee tus archivos con las API propias del navegador y nunca vuelve a codificar los píxeles, así que la salida Base64 se decodifica en un archivo idéntico al original. No se redimensiona, comprime ni convierte nada por el camino.
Tampoco se sube nada. Los archivos se quedan en tu dispositivo, se procesan dentro de la pestaña y se descartan al cerrarla. Eso importa con logotipos, diseños sin publicar o capturas que preferirías no entregar a un servidor de terceros. La herramienta es gratuita y no requiere registro.
Consejos para obtener los mejores resultados
- Incrusta solo imágenes pequeñas, como iconos, logotipos y gráficos sencillos; Base64 añade alrededor de un tercio al tamaño.
- Comprime o redimensiona la imagen antes de codificarla, porque la cadena Base64 crece con cada byte del original.
- En iconos SVG, Base64 evita problemas de comillas cuando el código rompería una cadena CSS o JSON.
- Usa «Base64 puro» cuando una API pida solo el contenido codificado, y «Data URI» cuando espere una URL.
- Las imágenes grandes suelen estar mejor enlazadas como archivos para que el navegador las guarde en caché entre páginas.
Preguntas frecuentes
¿Cómo convierto una imagen a Base64?
Suelta la imagen en el recuadro de arriba y haz clic en «Convertir a Base64». Después elige «Data URI», «Base64 puro», «Etiqueta <img>» o «Fondo CSS» y copia el resultado. La codificación se hace en tu navegador y la salida se decodifica exactamente en el archivo original.
¿Qué es un data URI en Base64?
Es una cadena que contiene la imagen entera como texto, con la forma data:, el tipo de medio como image/png, ;base64, y después los bytes codificados. Los navegadores la aceptan en cualquier sitio donde se permita la URL de una imagen, así que la imagen no necesita un archivo aparte.
¿Convertir a Base64 reduce la calidad de la imagen?
No. La herramienta codifica los bytes originales del archivo sin recomprimir nada, así que la imagen es exactamente la misma al decodificarla. Lo que cambia es el tamaño: el texto Base64 ocupa alrededor de un 33 % más que el archivo binario.
¿Qué formatos de imagen puedo convertir?
Se admiten archivos PNG, JPG, WebP, GIF, SVG, AVIF, BMP e ICO, y puedes añadir varios a la vez. Cada resultado muestra su tamaño, así que ves cuánto añadiría al código incrustarlo.
¿Debo usar imágenes en Base64 en mi web?
Para iconos pequeños, logotipos y plantillas de correo puede ahorrar una petición y mantenerlo todo en un archivo. Para fotos e imágenes grandes suele perjudicar, porque el texto es más pesado y no se puede guardar en caché por separado. Revisa el tamaño mostrado antes de incrustar.
¿Se suben mis imágenes a un servidor?
No. La codificación Base64 se ejecuta por completo en tu navegador. Tus imágenes nunca se envían a los servidores de Krawly y no se guarda nada, así que los logotipos y capturas privados se quedan en tu dispositivo. Al cerrar la pestaña se descartan los archivos y los resultados.
Privado por diseño. Todos los conversores de Krawly funcionan dentro de tu navegador con JavaScript y WebAssembly. Tus archivos no se suben, no se guardan y nadie los ve: cuando cierras la pestaña, desaparecen.