Conversor imagen ↔ Base64
Convierte imágenes en data URLs Base64 y viceversa — con fragmentos CSS y HTML
Sobre esta herramienta
Suelta, elige o pega una imagen y obtén su forma Base64 en todos los sabores que puedas necesitar: un data URL listo para usar, una declaración CSS background-image, una etiqueta <img> completa con sus dimensiones reales y el payload Base64 puro. La dirección inversa también funciona: pega un data URL o un bloque de Base64 y la imagen se decodifica, se previsualiza y se puede descargar como archivo.
El formato se identifica por los bytes mágicos, no por la extensión ni el tipo MIME declarado, así que un PNG renombrado a .jpg (o un data URL mal etiquetado) se convierte correctamente igual. El panel de tamaños es honesto con el coste: Base64 infla los datos alrededor de un tercio, y el tamaño codificado exacto aparece junto al original para que decidas si compensa incrustar.
A diferencia de la mayoría de sitios de imagen a Base64, aquí no se sube nada: el archivo se lee con la API FileReader del navegador y se codifica en la propia página. Eso lo hace seguro para capturas de paneles internos, imágenes de productos sin publicar o cualquier cosa que prefieras no entregar al servidor de un desconocido.
Preguntas frecuentes
- ¿Cuándo debería incrustar una imagen como Base64 en vez de enlazar un archivo?
- Cuando la imagen es pequeña (menos de ~10 KB), cambia rara vez y costaría una petición HTTP extra: iconos, logos en correos o documentos HTML de un solo archivo. Para cualquier cosa mayor gana el archivo aparte: se cachea de forma independiente, carga en paralelo y no engorda tu HTML o CSS un 33%.
- ¿Por qué la versión Base64 es un tercio más grande que mi archivo?
- Base64 representa cada 3 bytes binarios como 4 caracteres ASCII, un sobrecoste estructural del +33% (más hasta dos caracteres de relleno). Gzip o Brotli en el servidor recuperan parte, pero la inflación es inherente a la codificación: cambia tamaño por la capacidad de incrustar binario en texto.
- ¿Puedo decodificar un data URL que encontré en una hoja de estilos o en HTML?
- Sí — cambia a Base64 → imagen y pega todo, prefijo data: incluido. Los data URLs de SVG con percent-encoding (los que no llevan ;base64) también se decodifican, y los saltos de línea o espacios del payload se eliminan automáticamente. El resultado se previsualiza en la página y se descarga con la extensión correcta.
- ¿Funciona con SVG, GIF e ICO, o solo con PNG y JPEG?
- Todo lo que el detector reconoce se convierte a Base64: PNG, JPEG, WebP, GIF, SVG, BMP, ICO y AVIF. Para SVG en concreto, ten en cuenta que el código XML suele ser más pequeño y legible incrustado directamente — codificar SVG en Base64 tiene sentido sobre todo cuando las comillas o el escapado se vuelven un problema.