Imagen → Base64

Convierte una imagen en un data URI en Base64 con código <img> y CSS listo, o decodifica un data URI a imagen, directamente en tu navegador.

Acerca de Imagen → Base64

Qué es

Esta herramienta codifica una imagen —PNG, JPEG, WebP, GIF, AVIF, BMP, ICO o SVG— en Base64 para que la incrustes directamente en HTML, CSS o JSON. El resultado sale como data URI, Base64 en bruto o, para SVG, data URI codificado para URL, junto con código listo para pegar. También funciona al revés: pega un data URI para ver y guardar la imagen.

Funciones principales

  • PNG, JPEG, WebP, GIF, AVIF, BMP, ICO y SVG; el tipo se detecta a partir del propio archivo.
  • Salida como data URI, Base64 en bruto o codificado para URL (más corto para SVG).
  • Código listo para una etiqueta <img> y CSS, con el ancho y alto reales.
  • Un diminuto marcador borroso (LQIP) para imágenes de carga diferida.
  • Decodificación: pega Base64 o un data URI para recuperar la imagen.

Cómo usarlo

  1. Suelta una imagen en la zona, haz clic en ella para elegirla o pulsa «Ejemplo».
  2. Elige el formato de salida.
  3. Activa el micro-marcador (LQIP) si lo necesitas.
  4. Copia el resultado o el código listo; para decodificar, pega un data URI en el campo de texto.

Cuándo es útil

  • Incrustar un icono pequeño en un archivo CSS sin una petición más.
  • Meter una imagen en un correo HTML o en una página de un solo archivo.
  • Ver qué imagen contiene un data URI largo que aparece en un código.

Privacidad y limitaciones

Tus datos

Tu imagen se procesa en el navegador y no se sube a ningún servidor: el sitio solo recibe un evento anónimo de «herramienta abierta», sin el contenido. Un resultado que envías a otra herramienta se queda 24 horas en este dispositivo, en «Actividad reciente».

Limitaciones

  • Base64 hace la imagen aproximadamente un tercio más grande, así que va mejor con imágenes pequeñas que con fotos.
  • El navegador no puede guardar en caché por separado una imagen incrustada.

Preguntas frecuentes

¿Cuándo conviene un data URI?

Para iconos, logotipos y marcadores pequeños, cuando ahorrar una petición importa más que el tamaño. Para fotos grandes es mejor un archivo normal: pesa menos y el navegador puede guardarlo en caché.

¿Qué es un marcador LQIP?

Una versión muy pequeña y borrosa de la imagen —unos cientos de bytes— que se muestra mientras carga la de verdad, para que la página no salte.

¿Por qué es mejor la codificación URL para SVG?

SVG es texto, así que se puede escribir en un data URI casi tal cual. La codificación URL lo mantiene legible y suele ser más corta que Base64.