¿Cómo convierto una imagen a base64 (data URI) y al revés?
Conversor imagen ↔ base64 / data URI online.
En modo "Codificar" subes un archivo y obtienes una cadena base64 + un data URI completo listo para pegar en CSS / HTML.
En modo "Decodificar" pegas base64 o un data URI, ves la previsualización y descargas como archivo.
Todo se ejecuta en local: la imagen no sale de tu navegador.
Ideal para desarrolladores: incrustar iconos en CSS sin peticiones extra, firmas de correo con imágenes inline, depurar correos HTML de marketing.
Cómo usarlo
- Elige un modo: "Codificar" (archivo → base64) o "Decodificar" (base64 → archivo).
- Codificar: suelta un archivo o pulsa "Elegir archivo". PNG, JPG, WebP, AVIF, HEIC, SVG, GIF.
- Obtienes dos salidas: el data URI completo `"data:image/...;base64,..."` (listo para `background-image` de CSS o `src` de HTML) y el payload "solo base64".
- Decodificar: pega el data URI completo o solo el payload base64. La herramienta detecta el formato por el prefijo o asume PNG. Previsualización + botón de descarga.
Cuándo es útil
Dónde se nota base64 y los data URIs - usos típicos:
- CSS sin peticiones extra: iconos diminutos como background-image: url(data:image/svg+xml;base64,...) eliminan el round-trip al servidor.
- Firmas de correo: logo embebido sin CDN, funciona sin conexión.
- Alternativa a SVG sprites: para iconos muy pequeños (<2 KB) un data URI suele ser más pequeño que el overhead de los headers HTTP.
- Payloads JSON: APIs que no aceptan multipart-form-data pero sí imágenes codificadas en base64 dentro de JSON.
- Marketing por email: algunas plataformas (Mailchimp, Brevo) esperan imágenes en base64.
- Test fixtures: en pruebas de front-end (Playwright, Cypress) las capturas suelen ir codificadas en base64.
Preguntas y respuestas
No. Todo se ejecuta en local mediante la FileReader API. Decode también: decodificamos base64 a bytes en local y construimos un Blob URL. DevTools > Network = ninguna petición.