¿Cómo convierto una imagen en un URI de datos Base64 para CSS?

Suelta o pega una imagen (Ctrl+V), abre la pestaña CSS y haz clic en Copiar. Obtienes una regla background-image: url(...) con el URI de datos incrustado. Las pestañas HTML, Markdown, Raw Base64 y JSON funcionan igual.

¿Por qué la salida Base64 es aproximadamente un tercio más grande que mi imagen?

Base64 convierte cada 3 bytes en 4 caracteres de texto, así que el texto es un 33 % más grande que el archivo. Por eso los URI de datos van bien para iconos y logotipos pequeños, no para fotos grandes.

¿Cómo puedo acortar la cadena Base64?

Abre primero Reducir y ajusta un Ancho máximo o un Formato (WebP, JPEG o PNG), y baja la Calidad para WebP o JPEG. Los archivos SVG y GIF no se pueden reducir así; SVG tiene en su lugar una pestaña SVG (codificado para URL).

¿Puedo convertir una cadena Base64 de nuevo en imagen?

Sí. Cambia la Dirección a Base64 a imagen y pega un URI de datos o Base64 sin más. Reconoce PNG, JPEG, GIF, WebP, SVG, BMP, ICO y AVIF, y luego ofrece la descarga. Una entrada no válida muestra un error.

¿Por qué falla Copiar o la vista previa aparece cortada con una imagen grande?

La vista previa muestra solo los primeros 2000 caracteres, pero Copiar y Descargar dan el valor completo. Las cadenas muy grandes pueden superar el límite del portapapeles del navegador, así que usa Descargar o reduce antes la imagen.

¿Es realmente gratis?

Sí. Todas las herramientas son gratis, sin cuenta y sin tarjeta de crédito. El trabajo se hace en tu dispositivo y no en nuestros servidores, y eso es lo que permite que siga siendo gratis.

¿Se suben mis archivos?

No. Tus archivos se abren y se procesan dentro de tu navegador y no se envían a LibraTool. Algunas herramientas descargan antes un motor de procesamiento o un modelo de IA en tu navegador; esa descarga no contiene ningún dato tuyo.

¿Funciona en móvil?

Sí. Funciona en los navegadores móviles actuales de iOS y Android, sin instalar nada. Los archivos muy grandes pueden ir lentos o quedarse sin memoria en un teléfono, así que usa un ordenador para esos.

🖼️

Imagen a Base64 gratis

Convierte una imagen a un URI de datos Base64 para uso inline en CSS, HTML o Markdown. Copia fragmentos listos para usar. Se codifica en tu navegador; nunca se sube.

El tamaño depende de tu dispositivoLos archivos permanecen privadosSin necesidad de registroGratis para siempre

Funciona sin conexión una vez cargado

Suelta un archivo aquí o haz clic para buscarlo

PNG, JPG, WebP, GIF, SVG, AVIF, ICO, HEIC, HEIF · procesado en tu dispositivo

o pulsa Ctrl+V para pegar desde el portapapeles

Explorar archivos

Consejo: también puedes pegar una imagen desde tu portapapeles (Ctrl+V).

Tus archivos nunca salen de tu dispositivo. Todo el procesamiento se realiza localmente en tu navegador.

Convierte una imagen a una data URI en Base64 que puedes pegar directamente en CSS, HTML o Markdown — sin archivo separado. Codificada en tu navegador; nunca se sube.

Usos habituales

Insertar una imagen en CSSIncrusta un pequeño icono o fondo como URI de datos en tu hoja de estilos.
Insertar una imagen en HTMLIncrusta un logo o icono directamente en HTML independiente.
Convertir un SVG o icono a Base64Convierte un pequeño icono en una URI de datos para insertar.
Insertar una imagen en MarkdownIncrusta una pequeña imagen en un archivo Markdown con una URI de datos.
Obtener una URI de datos de imagenProduce un URI data: bruto que puedes usar en cualquier lugar.

Cómo funciona

Un URI de datos incrusta una imagen directamente en tu código como texto, por lo que se carga sin una solicitud de archivo separada — útil para iconos pequeños y HTML autónomo. Esto la codifica en tu navegador.

1
Sueltas una imagen
Se lee localmente con la API FileReader — nunca se carga.
2
Se codifica en Base64
Los bytes de imagen se convierten en un URI data: (data:image/...;base64,…) directamente en tu navegador.
3
Tú eliges un fragmento
Copia el URI de datos sin procesar, o CSS listo (background-image), HTML (<img>) o Markdown.
4
Pégalo en tu código
La imagen ahora viaja insertada con tu CSS/HTML — no hay archivo extra para alojar.

La imagen se codifica completamente en tu dispositivo. Nota que Base64 es ~33% más grande que el original, así que los URIs de datos son mejores para imágenes pequeñas.

Herramientas relacionadas

🖼️

Esteganografía de Imagen (Ocultar Texto en Imagen)

Oculta un mensaje de texto secreto dentro de un PNG usando esteganografía de bit menos significativo, con cifrado opcional AES-256-GCM con contraseña. Extráelo más tarde con la misma herramienta. Todo se ejecuta en tu navegador.

ProbarArchivos locales

🔢

Codificador y decodificador de Base64

Codifica texto o archivos en Base64, o decodifica cadenas Base64 a texto sin formato. Instantáneo, privado y gratuito.

Probar

🔗

Codificador y decodificador de URL

Codifica y decodifica URLs y cadenas de consulta. Soporta encodeURIComponent, decodeURIComponent y análisis de cadenas de consulta.