🖼️

Convertidor de Imagen a Base64

Convierte cualquier imagen en una URL de datos Base64 para incrustarla directamente en HTML o CSS.

📁

Arrastra una imagen aquí o haz clic para explorar

Admite JPG, PNG, WEBP, GIF, SVG

Toda la conversión ocurre en tu navegador. Tu imagen nunca se sube.

Convertir una imagen a una URL de datos Base64 te permite incrustarla directamente dentro de tu HTML o CSS como texto, sin archivo separado y sin petición de red extra. Para un icono pequeño, eso puede acelerar de verdad una página: un viaje menos al servidor. Pero es una técnica con una curva de compromiso muy marcada: pasados unos pocos kilobytes, incrustar una imagen hace tu página más lenta y pesada, no más rápida. Entender dónde está esa línea es lo que separa usar bien las URL de datos de hinchar tu sitio. Esta herramienta convierte cualquier imagen a una URL de datos enteramente en tu navegador.

Cómo funciona la herramienta

Selecciona una imagen y la herramienta la codifica en una URL de datos Base64: una larga cadena de texto que empieza por data:image/ y contiene la imagen completa en línea. Puedes copiarla y pegarla directamente en el src de una etiqueta img, un background-image de CSS, o donde se espere una URL. La codificación ocurre en tu navegador, así que la imagen nunca se sube, y la salida funciona de inmediato en cualquier navegador moderno sin un paso de alojamiento.

El formato de URL de datos y su coste

data:image/png;base64,iVBORw0KGgoAAAANS... ↑ tipo MIME ↑ codif. ↑ datos de imagen Coste de tamaño: Base64 es ~33% mayor que el archivo imagen de 10 KB → ~13 KB de texto Regla práctica: Menos de ~2 KB → incrustar suele ayudar Más de ~5-10 KB → enlaza el archivo en su lugar

El aumento de tamaño del 33% es la pega que hace de las URL de datos una herramienta para imágenes pequeñas. Base64 codifica tres bytes en cuatro caracteres de texto, así que cada imagen incrustada es un tercio mayor que el archivo original, y a diferencia de un archivo enlazado, ese texto en línea no puede cachearse por separado: se re-descarga con el HTML o CSS en cada carga de página. Una imagen de cabecera de 200 KB incrustada como URL de datos se vuelve 266 KB de texto que se envía en cada vista de página, y por eso la técnica solo compensa para activos diminutos y muy usados.

Lo que conviene saber sobre las URL de datos

  • 1Las URL de datos brillan solo para imágenes muy pequeñas. Por debajo de unos 2 KB —iconos diminutos, patrones simples, un logo pequeño— incrustar ahorra una petición HTTP y puede acelerar de forma medible el primer renderizado. Por encima, la penalización de tamaño del 33% y la pérdida de caché superan la petición ahorrada, y un archivo enlazado es más rápido. El punto de equilibrio es bajo; respétalo.
  • 2Las imágenes incrustadas no pueden cachearse de forma independiente, que es el coste oculto. Un archivo de imagen enlazado se descarga una vez y se reutiliza en cada página; una URL de datos se re-analiza y re-descarga con su documento anfitrión cada vez. Para una imagen usada en muchas páginas, incrustar multiplica su peso en todas ellas en lugar de cachearlo una vez.
  • 3Incrustar una URL de datos en CSS puede eliminar una petición que bloquea el renderizado. Un patrón de fondo pequeño o un icono incrustado en tu hoja de estilos carga con el CSS en lugar de disparar una descarga separada que podría retrasar el renderizado. Este es uno de los pocos casos donde una URL de datos claramente ayuda al rendimiento: pequeña, crítica, en el CSS.
  • 4Base64 es codificación, no compresión: comprime primero. La URL de datos de una imagen sin comprimir es innecesariamente enorme. Optimiza y comprime siempre la imagen a su menor tamaño sensato antes de convertir, porque Base64 entonces añade su 33% sobre un archivo ya pequeño en lugar de sobre uno hinchado.
  • 5Las URL de datos hinchan tu HTML y perjudican la legibilidad y edición. Una página salpicada de cadenas en línea de kilobytes es difícil de leer, comparar y mantener, e infla el archivo HTML que debe descargarse antes de que nada se renderice. Reserva la incrustación para unos pocos activos genuinamente diminutos y críticos para el rendimiento, no como enfoque general para imágenes.

Preguntas frecuentes

¿Cuándo debo usar una URL de datos Base64 para una imagen?

Para imágenes muy pequeñas —aproximadamente por debajo de 2 KB— donde ahorrar una petición HTTP supera las desventajas. Iconos diminutos, patrones de fondo pequeños y gráficos simples en línea son buenos candidatos, especialmente incrustados en CSS donde evitan una descarga separada que bloquea el renderizado. Por encima de unos pocos kilobytes, el aumento de tamaño del 33% y la pérdida de caché hacen más rápido un archivo enlazado. Las URL de datos son una herramienta de precisión para activos pequeños, no una estrategia general de imágenes.

¿Por qué incrustar una imagen hace mi página más grande?

Dos razones. Primero, la codificación Base64 es un 33% mayor que el archivo original, porque representa tres bytes con cuatro caracteres de texto. Segundo, a diferencia de un archivo enlazado que los navegadores cachean y reutilizan, una URL de datos incrustada se descarga fresca con su HTML o CSS en cada carga de página, así que una imagen compartida se re-descarga en cada página en lugar de cachearse una vez. Para cualquier cosa salvo activos diminutos, esto hace la página más pesada, no más ligera.

¿Se ve afectada la calidad de la imagen al convertir a Base64?

No: Base64 es una codificación de texto sin pérdida, no compresión, así que reproduce los bytes exactos del archivo original sin ningún cambio de calidad. La imagen se ve idéntica. Lo que sí cambia es el tamaño: el texto codificado es alrededor de un tercio mayor que el archivo. Si quieres la imagen más pequeña, comprímela antes de convertir; Base64 en sí nunca toca la calidad, solo la forma en que se representan los datos.

¿Puedo usar una URL de datos en CSS además de en HTML?

Sí, y CSS suele ser el mejor sitio para ello. Un icono pequeño o patrón de fondo incrustado como URL de datos en una regla background-image carga con la hoja de estilos en lugar de disparar una descarga separada, lo que puede evitar una petición que bloquea el renderizado. La misma URL de datos funciona también en el src de una etiqueta img de HTML. Los compromisos de tamaño y caché son idénticos en ambos contextos, así que aplica la misma regla de «solo activos pequeños».

¿Se sube mi imagen al convertirla?

No. La conversión corre enteramente en tu navegador, así que la imagen se codifica localmente y nunca se transmite, registra ni almacena. Puedes verificarlo desconectándote de internet: la herramienta sigue funcionando porque no hay servidor implicado. Esto mantiene imágenes privadas, logos y activos no publicados en tu propia máquina durante toda la conversión.