DevToolPal
ES

Conversor de imagen a Base64

Convierte imágenes PNG, JPG, GIF, WebP o SVG en data URIs Base64 para CSS, HTML y Markdown, o decodifica Base64 de vuelta a imagen.

Se ejecuta en local, nunca se sube

Opciones

Imagen

Suelta aquí una imagen, elige un archivo o pega abajo una cadena Base64 / data URI.

Base64

Qué hace

Esta herramienta convierte una imagen en texto Base64 y en un data URI listo para pegar. Un data URI incrusta la imagen directamente en HTML, CSS, Markdown, JSON o un correo, así que la página necesita una petición HTTP menos y el fragmento funciona sin alojar un archivo aparte. También funciona al revés: pega Base64 o un data URI para ver la imagen y descargarla.

Cómo se usa

  1. Suelta una imagen en la zona para soltar archivos, pulsa Elegir imagen o pulsa Ejemplo para cargar un logo SVG.
  2. La vista previa muestra la imagen con su tipo, tamaño del archivo, tamaño en Base64 y dimensiones.
  3. Elige un formato de Salida:
    • Data URI: data:image/png;base64,…, para atributos src y JSON.
    • Solo Base64: la cadena sola, opcionalmente partida a 76 caracteres para usos MIME y de estilo PEM.
    • Fondo CSS: una declaración background-image: url("…"); completa.
    • HTML <img>: una etiqueta de imagen con el data URI como src.
    • Markdown: ![image](data:…).
  4. Copia el resultado. Para decodificar, pega Base64 o un data URI en el cuadro de entrada y pulsa Descargar imagen.

Ejemplo

Un PNG de 2×1 píxeles se convierte en:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAIAAAB7QOjdAAAADUlEQVR4nGP4zwAE/wEHAAH/4iOeWQAAAABJRU5ErkJggg==

Usado en CSS:

.dot { background-image: url("data:image/png;base64,iVBORw0KGgo…"); }

Cuándo incrustar imágenes

Incrustar ayuda con imágenes pequeñas y de uso frecuente, como iconos, fondos diminutos, indicadores de carga y firmas de correo. No encaja bien con fotos ni gráficos grandes: Base64 añade alrededor de un tercio al tamaño, la imagen no se puede guardar en caché por separado de la página o de la hoja de estilos, y retrasa el análisis del resto del archivo. Como regla general, mantén las imágenes incrustadas por debajo de unos pocos kilobytes. Para SVG, un data URI con codificación porcentual (data:image/svg+xml,…) suele ser más pequeño que Base64, y la herramienta acepta ambos.

Preguntas frecuentes

› ¿Se sube mi imagen?

No. El archivo se lee y se codifica en tu navegador. No se envía nada a ningún servidor, así que las capturas privadas y los diseños sin publicar se quedan en tu dispositivo.

› ¿Qué formatos de imagen se admiten?

PNG, JPEG, GIF, WebP, AVIF, SVG, ICO y BMP. El tipo se detecta a partir de los propios bytes del archivo, no de su nombre.

› ¿Por qué el Base64 ocupa más que el archivo?

Base64 escribe cada 3 bytes como 4 caracteres, así que el texto es un 33% más grande que el archivo original. Incrusta solo imágenes pequeñas como iconos; enlaza las más grandes como archivos normales.

› ¿Puedo convertir Base64 de vuelta en imagen?

Sí. Pega un data URI o una cadena Base64 sola en el cuadro de entrada. La herramienta muestra una vista previa, detecta el tipo y te permite descargar el archivo de imagen.