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.
Arrastra tu imagen aquí o haz clic para elegirla
Admite cualquier formato de imagen, incluidos SVG y GIF
Tu archivo nunca sale de tu navegador: todo el proceso ocurre en tu dispositivo.
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.