Cuatro resultados útiles
Copia Base64 sin formato, un URI de datos completo, un elemento de imagen HTML o una declaración de fondo CSS lista para usar.
Herramientas de imagen
•
Herramienta online gratis
Imagen a Base64
Codifica imágenes PNG, JPG, WebP, GIF y SVG como Base64 directamente en tu navegador.
Gratis
Sin registro
En el navegador
Herramienta online
Imagen a Base64
Lista
Codificador privado de imágenes en el navegador
Convierte imágenes a Base64 sin subirlas
Codifica una imagen como cadena Base64 sin formato, URI de datos completo, etiqueta de imagen HTML o valor de fondo CSS. El procesamiento se realiza localmente en tu navegador.
Análisis preciso del tamaño
Compara el archivo de origen con el resultado codificado y consulta el aumento exacto de tamaño antes de insertarlo.
Local y privado
La imagen de origen y los datos Base64 generados permanecen en la memoria del navegador y no se suben para la conversión.
Sube una imagen para codificarla
Arrastra y suelta, pega desde el portapapeles o elige una imagen de tu dispositivo
Copia una imagen y pulsa Ctrl+V o Command+V Procesado localmente en tu navegador
Imagen seleccionada
- Nombre del archivo
- Tipo de archivo
- Dimensiones
- Tamaño original
- Tamaño Base64 estimado
Se detectó un archivo grande
El resultado Base64 es aproximadamente un 33 % mayor que el archivo original y puede requerir bastante memoria del navegador.
Los datos de GIF animado se conservan durante la codificación Base64.
SVG ya es un formato basado en texto. El marcado SVG integrado puede ser más pequeño y flexible que Base64 para usarlo en HTML.
Completa la verificación antes de codificar la imagen.
Codificando imagen
Leyendo y codificando la imagen localmente en tu navegador…
Resultados Base64 generados
La imagen se codificó correctamente.
Resultados Base64 generados
Elige el formato que necesita tu proyecto y copia o descarga el texto generado.
Codificando imagen
Leyendo y codificando la imagen localmente en tu navegador…
Resumen del tamaño de codificación
- Archivo de origen
- Cadena Base64
- URI de datos completo
- Aumento de tamaño
- :percent% del tamaño original
Base64 normalmente añade cerca de un 33 % porque cada tres bytes de origen se representan con cuatro caracteres de texto.
Considera usar una imagen externa
Las imágenes Base64 grandes aumentan el tamaño del HTML o CSS, no pueden almacenarse en caché de forma independiente y pueden retrasar la representación de la página.
Tu imagen nunca sale de este dispositivo
La codificación se realiza mediante JavaScript en la memoria del navegador. La imagen y el resultado generado no se envían a un endpoint de conversión de CyberTools.
Sin pérdida de calidad de imagen
Base64 es una codificación de texto reversible. Conserva los bytes originales sin redimensionar, recomprimir ni cambiar la calidad de la imagen.
Usa Base64 de forma selectiva
Base64 integrado resulta más útil para recursos muy pequeños. Los archivos externos suelen ser mejores para imágenes grandes que se benefician del almacenamiento en caché y la carga diferida.
Codificador privado de imágenes en línea
Imagen a Base64: codifica imágenes para usarlas integradas en la web
Convierte imágenes PNG, JPG, JPEG, WebP, GIF o SVG en texto Base64 directamente en tu navegador. La herramienta genera una cadena Base64 sin formato, un URI de datos completo, un ejemplo de imagen HTML y un ejemplo de fondo CSS.
La imagen se procesa localmente y no se sube a un servidor de conversión. Puedes consultar el tamaño codificado exacto, compararlo con el archivo de origen y copiar únicamente el formato que necesita tu proyecto.
Código listo para usar
Genera Base64 sin formato, un URI de datos, HTML y CSS sin construir manualmente prefijos, tipos MIME ni marcado.
Comprende el coste de tamaño
Consulta el número exacto de caracteres y el aumento porcentual producido por Base64 antes de añadir el resultado a una página web.
Procesamiento solo en el navegador
Mantén diseños privados, capturas internas y recursos de clientes en tu propio dispositivo durante toda la conversión.
Qué hace la herramienta Imagen a Base64
El codificador lee los bytes binarios de una imagen y los representa mediante el alfabeto Base64. Produce un valor de texto que puede utilizarse en HTML, CSS, JSON, XML, correo electrónico y otros formatos orientados a texto sin dañar los datos binarios originales.
Se proporcionan cuatro resultados: los caracteres Base64 sin formato, un URI de datos completo con el tipo MIME, un elemento img de HTML y un ejemplo de background-image de CSS. Puedes copiar la versión que necesita tu aplicación sin montar el código manualmente.
Cómo codificar una imagen como Base64
Elige un archivo PNG, JPG, JPEG, WebP, GIF o SVG, arrástralo al área de carga o pega una imagen desde el portapapeles. Revisa la información y la vista previa del archivo, completa la verificación cuando sea necesaria e inicia la codificación.
Después de convertirlo, compara los tamaños original y codificado. Selecciona Base64 sin formato, URI de datos, HTML o CSS y luego copia el resultado o descárgalo como archivo de texto. Restablece la herramienta antes de procesar otra imagen.
Cómo funciona la codificación Base64
Los archivos binarios contienen valores de byte entre 0 y 255, incluidos valores que no pueden representarse de forma segura como texto visible. Base64 agrupa la entrada en bloques de tres bytes y asigna cada bloque a cuatro caracteres ASCII imprimibles elegidos de un alfabeto de 64 caracteres.
El proceso es determinista y sin pérdidas. Al decodificar la cadena Base64 se reconstruyen los mismos bytes de origen. Pueden añadirse caracteres de relleno al bloque final cuando la longitud de entrada no es divisible entre tres.
Por qué el resultado Base64 es cerca de un 33 % mayor
Cada tres bytes de datos de origen se convierten en cuatro caracteres Base64. Esta proporción de cuatro a tres hace que el texto codificado sea normalmente cerca de un tercio mayor que el archivo original, con una pequeña diferencia adicional causada por el relleno y el prefijo del URI de datos.
Una imagen de 30 KB produce aproximadamente 40 KB de caracteres Base64. Este aumento forma parte del método de codificación y no puede eliminarse sin elegir otra representación o reducir primero el archivo de origen.
Cómo entender los URI de datos Base64
Una cadena Base64 sin formato no identifica el tipo de archivo. Un URI de datos añade el prefijo data:, el tipo MIME de la imagen y el marcador ;base64 antes de los caracteres codificados. Así, los navegadores pueden tratar el valor completo como una URL de imagen integrada.
Los URI de datos pueden colocarse en un atributo src de img en HTML, en un valor background-image de CSS o en otro contexto que acepte una URL. Los ejemplos generados incluyen el tipo MIME correcto obtenido del archivo seleccionado.
Cuándo son útiles las imágenes Base64 integradas
Base64 puede resultar práctico para iconos diminutos de interfaz, indicadores de carga, recursos de correo electrónico, informes portátiles, datos de prueba y archivos HTML independientes. En estos casos puede ser valioso evitar una solicitud de imagen separada o mantener todo en un único documento.
También es útil cuando un recurso debe viajar dentro de JSON u otra carga útil de solo texto. Herramientas de compilación como Vite y webpack suelen integrar automáticamente recursos pequeños por debajo de un límite de tamaño configurado.
Cuándo es mejor utilizar una imagen externa
Las fotografías grandes, imágenes principales, iconos repetidos y contenido situado más abajo en la página suelen rendir mejor como archivos externos. Las imágenes externas pueden almacenarse en caché por separado, obtenerse en paralelo, comprimirse mediante la infraestructura de entrega y cargarse de forma diferida cuando se necesitan.
Una imagen Base64 integrada pasa a formar parte del archivo HTML o CSS. Aumenta el trabajo de análisis, no puede almacenarse en caché por separado y debe descargarse de nuevo cada vez que cambia el documento que la contiene.
Privacidad e imágenes sensibles
Base64 es codificación, no cifrado. Cualquier persona que reciba el resultado puede decodificarlo y recuperar la imagen original. No consideres una cadena Base64 como un método para ocultar información visual confidencial.
Esta herramienta realiza la codificación localmente en la memoria del navegador y no envía la imagen a un endpoint de conversión de CyberTools. El procesamiento local es útil para diagramas internos, recursos de clientes, capturas privadas y archivos sujetos a requisitos de confidencialidad.
Consideraciones sobre SVG y GIF animado
Un GIF animado permanece animado porque Base64 conserva todos los bytes, incluidos todos los fotogramas de la animación. Al utilizarse en un elemento de imagen HTML compatible, el URI de datos resultante se comporta igual que el GIF original.
SVG ya es un formato XML basado en texto. El marcado SVG integrado directamente suele ser más pequeño y permite aplicar estilos o scripts a elementos individuales. El SVG codificado en Base64 es útil principalmente cuando se necesita un valor URL, por ejemplo para un fondo CSS.
Uso de Base64 en proyectos web modernos
React, Vue y otros frameworks pueden usar URI de datos en atributos de imagen o enlaces de estilo. Puede resultar práctico para recursos pequeños y puntuales, pero las imágenes mayores normalmente deben importarse como archivos para que el sistema de compilación optimice nombres, caché y entrega.
Muchos empaquetadores ofrecen límites configurables para la integración. Los recursos por debajo del límite se convierten en URI de datos, mientras que los archivos mayores se emiten por separado. Esto equilibra la sobrecarga de solicitudes con el aumento de tamaño de Base64 y el comportamiento de la caché.
Resultados generados por el codificador
| Resultado | Qué contiene |
|---|---|
| Cadena Base64 sin formato | Solo los caracteres codificados, sin tipo MIME ni prefijo de URI de datos. |
| URI de datos Base64 | El valor completo data:[tipo-mime];base64,[contenido] para utilizarlo como URL integrada. |
| Ejemplo de uso en HTML | Un elemento img con el URI de datos generado en el atributo src. |
| Ejemplo de uso en CSS | Una declaración background-image que contiene el URI de datos generado. |
Usos habituales de la codificación de imágenes a Base64
- Integrar un icono diminuto sin una solicitud de imagen adicional
- Crear un documento HTML independiente que funcione sin conexión
- Incluir una imagen dentro de una carga útil JSON o XML
- Generar una imagen integrada para una plantilla de correo HTML
- Añadir una imagen de fondo pequeña directamente al CSS
- Preparar datos de prueba portátiles para desarrollo y depuración
- Verificar el resultado de un proceso de compilación frontend
- Transportar bytes binarios de imagen mediante un campo de solo texto
Cuándo conviene evitar las imágenes Base64
- Fotografías grandes o imágenes principales
- Imágenes que deben cargarse de forma diferida
- Recursos reutilizados en varias páginas
- Archivos que se benefician de una caché independiente del navegador
- HTML o CSS que cambia con frecuencia y contiene imágenes grandes
- Imágenes servidas eficientemente mediante una CDN
Especificaciones del codificador de imágenes a Base64
| Propiedad | Detalles |
|---|---|
| Formatos aceptados | PNG, JPG, JPEG, WebP, GIF y SVG |
| Tamaño máximo en el navegador | 200 MB, sujeto a la memoria disponible del navegador y del dispositivo |
| Métodos de entrada | Selección de archivo, arrastrar y soltar o pegar desde el portapapeles |
| Resultados generados | Base64 sin formato, URI de datos completo, ejemplo HTML y ejemplo CSS |
| Comportamiento de codificación | Conversión de bytes a texto sin pérdidas, redimensionamiento ni recompresión |
| Compatibilidad con GIF animado | Los bytes de la animación se conservan en el resultado codificado |
| Aumento de tamaño esperado | Aproximadamente un 33 %, más el breve prefijo del URI de datos |
| Lugar de procesamiento | Memoria local del navegador, sin subir la imagen para convertirla |
Preguntas frecuentes sobre Imagen a Base64
¿Por qué la cadena Base64 es más larga que la imagen original?
Base64 representa cada tres bytes de origen con cuatro caracteres de texto. Por eso, la cadena resultante suele ser cerca de un 33 % mayor, con una pequeña cantidad adicional por el relleno y el prefijo del URI de datos.
¿La codificación Base64 reduce la calidad de la imagen?
No. Base64 no tiene pérdidas y conserva los bytes originales del archivo. No redimensiona, recomprime ni altera la calidad visual de la imagen.
¿Puedo abrir un URI de datos Base64 directamente en un navegador?
Sí. Puedes pegar un URI de datos de imagen válido en la barra de direcciones del navegador o asignarlo como origen de una imagen para comprobar rápidamente el resultado codificado.
¿Se conservan los GIF animados?
Sí. Se codifican todos los bytes del archivo GIF, incluidos los fotogramas y los datos de temporización. El resultado permanece animado en los contextos compatibles con imágenes GIF animadas.
¿Debo usar imágenes Base64 en React o Vue?
Base64 puede ser útil para recursos muy pequeños. Las imágenes más grandes normalmente deben importarse como archivos para que el framework o empaquetador optimice la caché, los nombres de archivo y la entrega.
¿Conviene codificar imágenes SVG como Base64?
Solo cuando se necesita un valor URL. Para HTML, el marcado SVG integrado directamente suele ser más pequeño y permite que CSS o JavaScript accedan a los elementos SVG individuales.
¿Base64 es una forma segura de cifrado?
No. Base64 es una codificación reversible y no ofrece confidencialidad. Cualquier persona que tenga la cadena puede reconstruir la imagen original.
¿Se sube mi imagen durante la conversión?
No. JavaScript lee y codifica la imagen localmente en tu navegador, y no la envía a un endpoint de conversión de imágenes de CyberTools.
Codificador gratuito de imágenes a Base64 para archivos PNG, JPG, JPEG, WebP, GIF y SVG. Genera la cadena Base64 sin formato, el URI de datos completo, una etiqueta de imagen HTML y un ejemplo de fondo CSS localmente, sin subir tu imagen.
Contacto
¿Falta algo?
Puedes solicitar herramientas que falten o enviarnos tus comentarios mediante nuestro formulario de contacto.
Contáctanos