Saltar al contenido principal
Utilia
Imágenes

Imagen a Base64 (y al revés)

Incrusta imágenes directamente en tu HTML o CSS con un data URI, o recupera una imagen a partir de una cadena base64 pegada. Dos direcciones, cero subidas: todo se codifica y decodifica en tu navegador.

Tus imágenes no se suben: todo se procesa en tu navegador.

Todo se calcula en tu navegador: no enviamos tus datos a ningún servidor.

Qué es un data URI

Un data URI es una cadena de texto que contiene el fichero completo codificado en base64: data:image/png;base64,seguido-de-datos. Al ponerla en el atributo src de una imagen o en un background-image de CSS, el navegador la muestra sin hacer ninguna petición al servidor.

La codificación base64 ocupa aproximadamente un 33 % más que el binario original: úsala para iconos e imágenes pequeñas, no para fotografías grandes.

Fórmula

tamaño base64 ≈ tamaño binario × 4 ÷ 3

Cuándo merece la pena

  • Iconos y logotipos pequeños: ahorras peticiones HTTP y la página pinta antes.
  • Plantillas de correo, donde enlazar ficheros externos suele dar problemas.
  • Un único fichero HTML autónomo que se pueda compartir o adjuntar sin carpetas.

Si el resultado supera los 5 MB de texto, la herramienta te avisa: cadenas tan largas ralentizan editores y algunos gestores de contenido las recortan.

Preguntas frecuentes

¿Base64 pesa más que la imagen original?
Sí, alrededor de un 33 % más: cada 3 bytes binarios se representan con 4 caracteres de texto. Por eso se recomienda solo para ficheros pequeños.
¿Puedo pegar el resultado directamente en CSS?
Sí: background-image: url("data:image/png;base64,…"); con sus comillas. Si marcaste «solo base64», añade tú el prefijo data:image/…;base64, delante.
¿Qué hago si la imagen decodificada no se ve?
Comprueba que la cadena esté completa (suele acabar en = o ==) y que el prefijo data: indique el tipo correcto. Si copiaste solo una parte, la decodificación falla.

Continúa donde lo dejaste con estas utilidades que combinan bien con esta.

Convertir JPG a PNG Convertir WebP a JPG o PNG Comprimir imagen Generador de favicon Conversor de bases