Monu Tools

Imagen a Base64

Convierte una imagen en un data URI Base64 para incrustarla en HTML, CSS o JSON, por completo en tu navegador.

Cómo usar Imagen a Base64

  1. 01

    Elige una imagen de tu dispositivo.

  2. 02

    Copia el data URI o el fragmento de CSS listo para usar.

  3. 03

    Pégalo en tu HTML, CSS o JSON.

Qué hace este convertidor

Este convertidor de imagen a Base64 transforma una imagen en un data URI, una larga cadena de texto que incrusta la imagen directamente, más un fragmento de fondo CSS listo para usar. Puedes insertar una imagen en línea en lugar de enlazar a un archivo aparte.

Se ejecuta localmente en tu navegador, así que tu imagen se lee en tu dispositivo y nunca se sube.

Por qué insertar una imagen en línea

Un data URI lleva la imagen completa dentro del marcado, así que el navegador no hace una petición de red aparte para obtenerla. Para recursos pequeños como los iconos, ese viaje de ida y vuelta ahorrado puede hacer que una página se sienta más rápida.

El compromiso: tamaño y caché

El inconveniente es el tamaño y la caché. Base64 añade alrededor de un 33 por ciento de sobrecarga porque representa datos binarios con un alfabeto de texto limitado, y una imagen insertada en línea no se puede cachear por separado, así que se descarga de nuevo con cada página que la contiene.

La regla general es insertar en línea imágenes pequeñas, iconos, logos diminutos o un sprite, donde evitar una petición compensa la sobrecarga, y mantener las imágenes más grandes como archivos normales que el navegador pueda cachear y cargar en paralelo.

Dónde funcionan los data URIs

Los data URIs funcionan en cualquier lugar donde se acepte una URL: el src de un img, un fondo CSS o un campo en JSON o en una plantilla de correo. Eso los hace prácticos para fragmentos autónomos.

Preguntas frecuentes

¿Se sube mi imagen a un servidor?

No. La imagen se lee totalmente en tu navegador, así que nunca sale de tu dispositivo.

¿Cuándo debo usar un data URI?

Para imágenes pequeñas como iconos, donde evitar una petición de red adicional compensa el aumento de tamaño. Para imágenes grandes, es mejor un archivo normal.

¿Por qué el Base64 es más grande que el archivo?

La codificación Base64 añade aproximadamente un 33 por ciento de sobrecarga porque representa datos binarios usando un alfabeto de texto limitado.

¿Qué es un data URI?

Un data URI es una cadena que contiene el propio archivo, codificado en línea, de modo que se puede usar en lugar de una URL para incrustar una imagen directamente en HTML, CSS, JSON o correo.

¿Puedo usarlo en CSS o JSON?

Sí. La salida funciona como un src de img, un background-image de CSS, o un valor de cadena en JSON y plantillas de correo. Se proporciona un fragmento de CSS listo para pegar.

Fuentes

Insertar esta herramienta

Añade esta herramienta a tu propio sitio web. Copia el fragmento de abajo. Se mantiene actualizado automáticamente.

<iframe src="https://monu.tools/embed/es/image-to-base64" width="100%" height="640" style="border:1px solid #e5e5e5;border-radius:12px;max-width:680px" loading="lazy" title="Monu Tools"></iframe>

Herramientas relacionadas