Imagen a Base64
Convierte una imagen en un código Base64 que puedes pegar directamente en HTML, CSS, JSON o una plantilla de email.
o arrástralo aquí · hasta 50 MB, gratis
¿Archivos más grandes? Con Pro conviertes archivos de hasta 500 MBSupera los límites gratis: podrás desbloquear la descarga desde 1,99 €.
Procesando…
Tu archivo está listo
Gratis · Sin registro · Sin marca de agua · Tus archivos no salen de tu dispositivo
Imagen a Base64 en 3 pasos
- Selecciona tu imagen o arrástrala al recuadro.
- Elige el resultado: data URI, solo Base64, CSS o etiqueta HTML.
- Haz clic en Convertir a Base64 y copia el código o descárgalo como archivo .txt.
Cuándo incrustar una imagen en Base64
Base64 escribe los bytes de un archivo como texto plano, así que una imagen puede ir dentro de una página HTML, una hoja de estilos, un JSON o una firma de email en lugar de ser un archivo aparte. Eso ahorra una petición en iconos y logotipos pequeños, y es la única forma de enviar una imagen a través de algunas API y campos de formulario que solo aceptan texto.
El precio es el tamaño: el texto Base64 ocupa alrededor de un tercio más que la imagen y no se puede guardar en caché por separado. Úsalo para imágenes de pocos kilobytes y deja las fotos como archivos normales. Para obtener el código más corto, comprime antes la imagen, o usa SVG para logotipos e iconos, que además se ven nítidos a cualquier tamaño.
Preguntas frecuentes
¿Cómo convertir una imagen a Base64?
Selecciona aquí una imagen, elige el formato del resultado y haz clic en Convertir a Base64. El código aparece en un recuadro con un botón Copiar, y también puedes descargarlo como archivo .txt. Funciona con imágenes JPG, PNG, GIF, WebP, SVG, AVIF, BMP e ICO.
¿Qué es una data URI?
Una data URI es el texto Base64 con un prefijo corto que indica al navegador el tipo de archivo, como data:image/png;base64, seguido del código. Puedes usarla en cualquier sitio donde se espere la URL de una imagen, por ejemplo en el src de una etiqueta img o en url() de CSS.
¿Cómo uso Base64 en HTML o CSS?
Elige "Etiqueta HTML <img>" para obtener un elemento img listo para usar, o "CSS background-image" para obtener una línea que puedes pegar en una regla de estilo. Los dos contienen la data URI completa, así que la imagen se muestra sin un archivo aparte.
¿Por qué el Base64 ocupa más que la imagen?
Base64 usa 4 caracteres de texto por cada 3 bytes, así que el código ocupa alrededor de un 33 % más que el archivo. No importa en iconos pequeños, pero en fotos se nota enseguida. Si el código es demasiado largo, comprime o reduce la imagen antes.
¿Se sube mi imagen a algún servidor?
No. La imagen se lee y se codifica dentro de tu navegador, en tu propio dispositivo, así que nunca se nos envía ni se guarda en ningún sitio. Una vez cargada la página, la herramienta sigue funcionando incluso sin conexión a internet.