Imagen a Base64 — Conversor a Data URI y CSS
Conversor en el navegador entre imágenes y Base64, data URI y fragmentos de CSS y HTML
Funciona en tu navegador · no se sube nada
Arrastra aquí la imagen que quieres pasar a Base64
Una imagen de hasta 5 MB. El Base64 ocupa más que el propio archivo, así que es ideal para iconos y logotipos pequeños. La imagen no sale de tu navegador.
Qué es
Esta herramienta reescribe los bytes de un archivo de imagen como texto formado por letras, números y unos pocos símbolos. Ese texto puede ir directamente en HTML o CSS como data URI del tipo data:image/png;base64,.... Todo funciona en tu navegador, y la dirección contraria, convertir Base64 otra vez en imagen, está en la misma página.
Cómo se usa
- Elige Imagen → Base64 y arrastra o selecciona una imagen: un archivo de hasta 5 MB.
- Debajo de la vista previa verás el tamaño original, el del texto Base64, el aumento y el consejo según el tamaño.
- En el recuadro que necesites (Data URI, Solo la cadena Base64, CSS background-image o Etiqueta HTML img) pulsa Copiar. Los valores largos muestran solo el principio, pero se copia todo; también puedes descargar un archivo de texto.
- Para el camino inverso, elige Base64 → Imagen y pega Base64 o un data URI. Aparecerán una vista previa y el botón Descargar imagen.
Cómo funciona
- Codificación: Base64 estándar (RFC 4648), 3 bytes a 4 caracteres, con relleno
=hasta un múltiplo de 4. Se convierten directamente los bytes del archivo, no una cadena de texto, así que cualquier imagen se decodifica sin cambios. - Tipo MIME: se lee de los primeros bytes del archivo (JPEG, PNG, GIF, WebP, SVG y otros) y se coloca tras
data:. Da igual que la extensión sea incorrecta. - Etiqueta HTML: se añaden width y height cuando se puede leer el tamaño de la imagen.
- Consejo de tamaño: hasta 10 KB va bien para incrustar, más de 50 KB merece pensarlo y más de 500 KB conviene subirlo y enlazarlo.
- Decodificación: se aceptan el Base64 seguro para URL (
-y_) y la falta de relleno=. Si el tipo declarado no coincide con la imagen real, se usa el real y se te avisa. Los data URI sin;base64no se leen.
Ejemplo
| Elemento | Valor |
|---|---|
| Original | icono de 2,1 KB |
| Texto Base64 | unos 2,8 KB (+33 %) |
| CSS | background-image: url("data:image/png;base64,..."); |
| HTML | <img src="data:image/png;base64,..." width="16" height="16" alt=""> |
Preguntas frecuentes
¿Se sube mi imagen a algún servidor?
No. La lectura del archivo y la codificación a Base64 se hacen dentro de tu navegador, y el texto resultante tampoco se guarda en ningún sitio.
¿Por qué el Base64 ocupa más?
Base64 escribe 3 bytes como 4 caracteres, así que el texto es más o menos un tercio (33 %) mayor que el archivo. Además, cuando va dentro de HTML o CSS, el navegador no puede guardar la imagen en caché por separado y la descarga de nuevo en cada visita.
¿A partir de qué tamaño no conviene usar Base64?
No hay una regla fija, pero lo habitual es incrustar iconos, logotipos y spinners pequeños de unos 10 KB y dejar como archivo normal lo que pase de unos 50 KB. La herramienta agrupa los tamaños en hasta 10 KB, hasta 50 KB, hasta 500 KB y más, y te dice en cuál estás. Las imágenes grandes es mejor subirlas y enlazarlas.
¿Para qué sirven los data URI?
Para el src de una img en HTML, un url() de background-image en CSS, una firma de correo, un archivo Markdown o una página HTML de un solo archivo en la que quieras que la imagen viaje con el documento. No hace falta un archivo de imagen aparte, aunque algunos clientes de correo bloquean las imágenes en data URI.
Al decodificar me dice que los datos no son válidos.
El prefijo data URI es opcional, los espacios y saltos de línea se ignoran y puedes pegar un fragmento entero de CSS o HTML; el data URI que contiene se localiza solo. Si aun así falla, seguramente el texto está cortado o lleva caracteres sueltos. Los datos que no son una imagen se rechazan.
¿Y las imágenes de más de 5 MB?
Varios megas de Base64 ralentizan el navegador y son difíciles de pegar en cualquier sitio, así que se admite una imagen de hasta 5 MB. Reduce antes las más grandes con el compresor o el redimensionador de imágenes.
