Imagen a Base64

Elige una imagen para obtener Base64 o una data URL—haz clic en la salida para copiar.

Acerca de Imagen a Base64

APIs, plantillas de correo y prototipos a veces necesitan la imagen como texto. Elige PNG, JPEG, GIF o WebP y copia Base64 puro o data URL completa.

Base64 mapea bytes binarios a ASCII seguro. La data URL añade data:image/png;base64, para que el navegador decodifique en src o background-image sin otra petición HTTP.

Qué puedes hacer

Codificar y copiar

Selecciona o arrastra y copia el resultado para img, CSS url(), OpenAPI o JSON.

Data URL vs Base64 puro

  1. Data URL: data:image/<tipo>;base64,<carga> — lista para HTML/CSS.
  2. Base64 puro: solo <carga> — cuando el API trae content-type aparte.
  3. Mismos bytes; cambia el envoltorio.

Qué se codifica

  1. El archivo completo (cabeceras + datos comprimidos; GIF incluye frames).
  2. No es convertir RGB decimal; es el buffer del fichero.
  3. Longitud ≈ 4/3 del tamaño en bytes (+ prefijo en data URL).

Tamaño

~33% más grande y sin caché HTTP como /img/logo.png. Mejor URL/CDN para héroes; Base64 para iconos y fixtures.

Casos de uso

Imagen a Base64 en línea

Sube PNG/JPEG/GIF/WebP, alterna puro vs data URL y copia. Backend suele querer puro; HTML estático, data URL.

Data URL en img

data:image/png;base64,… entero en src o url().

CSS inline

Sprites pequeños o placeholders 1×1 en hojas de estilo o email autocontenido.

JSON / OpenAPI

Campo base64 en el cuerpo; indica PNG vs JPEG en metadatos.

Preguntas frecuentes

¿Cómo paso una imagen a Base64?
Elige archivo, espera la codificación y copia. HTML/CSS → data URL; REST → Base64 puro si el contrato lo dice.
¿Base64 vs data URL?
Base64 es solo texto codificado. Data URL añade esquema y MIME. El navegador inline suele exigir el prefijo completo.
¿Formatos?
PNG, JPEG, GIF, WebP. El prefijo MIME coincide con el archivo.
¿Relación con binario?
Codifica bytes; al decodificar recuperas el mismo fichero bit a bit.
¿Por qué el texto es más largo?
Base64 ~4/3 bytes; 300 KB JPEG ≈ 400 KB de texto.
¿Límite de tamaño?
Codifica en el navegador; varios MB pueden ir lentos. Fotos grandes: URL.
¿Volver de Base64 a imagen?
Usa la herramienta «Base64 a imagen» de la misma sección.
¿Base64 en producción?
Activos grandes en CDN. Base64 para iconos, demos y tests; vigila peso HTML.

Prefijos data URL

  • PNGdata:image/png;base64,… (transparencia)
  • JPEGdata:image/jpeg;base64,…
  • API sin prefijoCopia solo lo que va tras la coma si el contrato lo pide