Imagen a Base64
Convierte una imagen en una cadena Base64 o un data URI que puedes pegar directamente en tu CSS o HTML.
o suelta las imágenes aquí
Hasta 30 MBTus imágenes se procesan en tu navegador y nunca se suben- 1Elige
Elige una imagen.
- 2Ajusta
Elige la salida: solo Base64, data URI, fondo CSS o una etiqueta img de HTML.
- 3Descarga
Cópiala con un clic.
Cómo usar Imagen a Base64
Elige la forma que vas a pegar
El data URI se pega tal cual en src="…" o en un url() de CSS. El Base64 sin más es para JSON y archivos de configuración. Las líneas ya preparadas de CSS background-image y de HTML <img> están para cuando solo quieres soltar algo que funcione. Un clic copia lo que hayas elegido.
Mantenlo pequeño
El Base64 pesa alrededor de un tercio más que el archivo que codifica y vive dentro de tu HTML o CSS en lugar de guardarse en caché como archivo aparte. Incrustar compensa por debajo de 10 KB, para iconos pequeños, marcadores de posición y separadores; por encima de 50 KB la herramienta te avisa, porque la página empezará a cargar más despacio.
Alternativas que conviene conocer
Un SVG casi siempre es mejor pegado como marcado que como Base64: sigue siendo editable, se le pueden aplicar estilos y comprime mejor. Y todo lo que aparezca en más de una página rinde más como archivo de imagen normal, que el navegador guarda en caché una vez y reutiliza.
Preguntas frecuentes
¿Mis fotos se suben a un servidor?
No. Todo se procesa dentro de tu navegador, así que tus fotos nunca salen de tu dispositivo. Cierra la pestaña y no queda ni rastro.
¿Hasta qué tamaño de imagen tiene sentido usar Base64?
Por regla general, menos de 10 KB. El Base64 ocupa alrededor de un 33 % más que el archivo original, así que incrustar imágenes grandes hace la página más lenta.