WebyTooly

Imagen a Base64

Sube una imagen y obtén su representación en Base64, con la variante lista para pegar en CSS o en una etiqueta img.

Espacio publicitario

Arrastra tu imagen aquí o haz clic para elegirla

Admite cualquier formato de imagen, incluidos SVG y GIF

Espacio publicitario

Qué es Base64 y cuándo conviene usarlo

Base64 representa datos binarios usando solo 64 caracteres imprimibles. Cada 3 bytes del archivo se convierten en 4 caracteres de texto, por lo que el resultado ocupa aproximadamente un 33 % más que la imagen original.

longitud Base64 ≈ ceil(bytes ÷ 3) × 4

Leemos el archivo con FileReader.readAsDataURL, que devuelve el binario exacto codificado, sin volver a comprimir ni tocar los píxeles. Por eso el data URI conserva el formato y la calidad originales.

sobrecarga % = (longitud del texto − bytes) ÷ bytes × 100

Un data URI evita una petición HTTP, lo que compensa en iconos muy pequeños incrustados en CSS. Para imágenes grandes es contraproducente: engorda el HTML o el CSS, no se cachea por separado y bloquea el renderizado.

Ejemplo práctico

Un icono PNG de 900 bytes se convierte en unos 1200 caracteres de Base64 (un 33 % más), que puedes pegar directamente en tu hoja de estilos y ahorrarte una petición al servidor.

Preguntas frecuentes

¿Base64 comprime la imagen?
No, al contrario: siempre la agranda alrededor de un 33 %. Sirve para incrustar la imagen dentro de un archivo de texto, no para reducir su peso.
¿Cuándo merece la pena incrustar una imagen?
Con iconos y patrones de pocos kilobytes que se usan en todas las páginas. A partir de unos 5-10 KB suele ser mejor un archivo aparte, que se cachea de forma independiente.
¿Se altera mi imagen?
No. Se codifican los bytes exactos del archivo original, así que el formato, la calidad y los metadatos se mantienen intactos.
¿Puedo usarlo con SVG?
Sí, y funciona bien porque los SVG suelen ser pequeños. Para SVG también existe la opción de incrustarlo sin codificar, pero Base64 es la más compatible.

Calculadoras relacionadas