Imagen a Base64
Convierte una imagen en un data URI en Base64 que puedes incrustar directamente en HTML o CSS.
Cómo usar Imagen a Base64
- Elige una imagen de tu dispositivo.
- Copia el data URI en Base64, o el fragmento de CSS ya preparado.
- Pégalo en tu HTML, CSS o JSON.
Acerca de Imagen a Base64
Esta herramienta codifica una imagen como un data URI en Base64 — una cadena de texto larga que comienza con data:image/...;base64, y contiene el archivo completo en forma de texto. Como es solo texto, puedes pegarlo directamente en un <img src>, un background-image de CSS, una hoja de estilos o un payload JSON, y la imagen se carga sin un archivo aparte ni una petición de red adicional. La herramienta también genera la línea de background-image de CSS correspondiente para que puedas incorporarla directamente.
La codificación ocurre en tu navegador con el FileReader integrado, así que la imagen nunca se sube. Se muestra la longitud de la cadena resultante, algo que importa porque Base64 hace que un archivo sea aproximadamente un tercio más grande que el original — ideal para iconos pequeños y logotipos, menos indicado para fotos grandes. Como regla general, incrustar merece la pena para imágenes de unos pocos kilobytes.
Para hacer el proceso inverso y convertir un data URI de nuevo en una imagen visible y descargable, usa Base64 a imagen. Si el archivo es grande, redúcelo primero con comprimir imagen o el redimensionador de imágenes para que la cadena codificada se mantenga manejable. Para codificar texto normal en lugar de imágenes, consulta codificar Base64.
Preguntas frecuentes
¿Para qué sirve un data URI en Base64?
Te permite incrustar una imagen directamente dentro de HTML, CSS o JSON como texto, de modo que se carga sin necesidad de un archivo aparte ni una petición de red. Resulta especialmente útil para iconos pequeños, logotipos e imágenes de correo electrónico.
¿Base64 hace que la imagen sea más grande?
Sí, un poco. La codificación Base64 aumenta el tamaño en aproximadamente un tercio, porque representa datos binarios usando solo caracteres de texto. Por eso es más adecuada para imágenes pequeñas.
¿Se sube mi imagen para codificarla?
No. La codificación se realiza en tu navegador con la API FileReader. El archivo nunca sale de tu dispositivo.
¿Puedo usar el resultado como fondo en CSS?
Sí. La herramienta genera la línea de background-image por ti — solo tienes que copiarla en tu hoja de estilos. También puedes pegar el data URI en bruto en una etiqueta img.
¿Qué formatos puedo codificar?
Cualquier imagen que tu navegador pueda leer, incluyendo PNG, JPEG, WebP, GIF y SVG. El data URI conserva el formato original y, en el caso del PNG, su transparencia.