Convertidor de Imagen a Base64

El Convertidor de imagen a Base64 es una herramienta gratuita en línea que convierte cualquier imagen en una cadena codificada en Base64. La codificación Base64 transforma los datos binarios de la imagen en texto ASCII plano, lo que le permite incrustar imágenes directamente en HTML, CSS, JavaScript, JSON, XML y más, sin necesidad de un archivo de imagen independiente. Todo sucede en su navegador: sus imágenes nunca se suben a ningún servidor.

¿Qué es la codificación Base64 para imágenes?

Base64 es un esquema de codificación de binario a texto que representa datos binarios utilizando 64 caracteres ASCII (A–Z, a–z, 0–9, +, /). Cuando se aplica a imágenes, Base64 convierte los bytes brutos de la imagen en una larga cadena de texto que puede incrustarse directamente en el código fuente. La forma más común de usar imágenes Base64 en el desarrollo web es a través de las URI de datos, un esquema que permite datos en línea en las URL utilizando el formato data:[tipo MIME];base64,[datos codificados].

Cuándo usar imágenes Base64

Cuándo NO usar imágenes Base64

La codificación Base64 aumenta el tamaño del archivo en aproximadamente un 33%. Para imágenes grandes (fotos, banners), use archivos de imagen tradicionales servidos a través de HTTP/2, que admite multiplexación. Evite Base64 para imágenes de más de 10–20 KB en producción, ya que la sobrecarga de tamaño supera el beneficio de tener menos solicitudes HTTP. Las cadenas Base64 grandes tampoco pueden ser almacenadas en caché por separado por el navegador.

Formatos de imagen compatibles

Cómo usar esta herramienta

1. Suba su imagen: Arrastre y suelte un archivo de imagen en el área de carga, haga clic para buscar archivos o pegue una imagen desde su portapapeles usando Ctrl+V (Cmd+V en Mac).
2. Previsualice y revise los metadatos: La herramienta muestra instantáneamente una vista previa de su imagen con metadatos que incluyen el nombre del archivo, las dimensiones, el tipo MIME y una comparación visual de tamaño entre los datos originales y los codificados.
3. Elija su formato de salida: Cambie entre cuatro pestañas de salida: Base64 puro (solo la cadena codificada), URI de datos (con prefijo MIME), etiqueta HTML <img> (lista para pegar) o propiedad CSS background-image.
4. Copie el resultado: Haga clic en el botón "⧉ Copiar" para copiar la salida codificada al portapapeles, lista para pegar en su código.

Guía de formatos de salida

Cadena Base64 pura

El texto codificado en Base64 puro sin ningún prefijo. Úselo cuando necesite los datos brutos para implementaciones personalizadas, llamadas a API o cuando vaya a añadir el prefijo MIME usted mismo.

URI de datos

La URI de datos completa, incluyendo el prefijo del tipo MIME (por ejemplo, data:image/png;base64,iVBOR...). Este es el formato más versátil: funciona directamente en atributos HTML src, valores CSS url() y carga de imágenes en JavaScript.

Etiqueta HTML <img>

Un elemento de imagen HTML listo para usar con la URI de datos Base64 como src, además de los atributos width y height para un diseño adecuado. Péguelo directamente en su HTML.

Propiedad CSS background-image

Una declaración de propiedad CSS completa utilizando background-image: url('data:...'). Añádala a cualquier regla CSS para usar la imagen como fondo sin una referencia de archivo externa.

Privacidad y seguridad

Esta herramienta procesa todo localmente en su navegador web utilizando la API FileReader de JavaScript. Sus imágenes nunca se suben a ningún servidor, nunca se almacenan y nunca se transmiten por la red. La conversión a Base64 ocurre completamente en su dispositivo, lo que hace que esta herramienta sea segura para imágenes sensibles y confidenciales.

Preguntas frecuentes

¿Qué es la codificación Base64 para imágenes?

La codificación Base64 convierte los datos binarios de una imagen en caracteres de texto ASCII. Esto le permite incrustar imágenes directamente en el código HTML, CSS o JavaScript como URI de datos, eliminando la necesidad de solicitudes de archivos de imagen independientes. La cadena codificada es aproximadamente un 33% más grande que los datos binarios originales.

¿Cuándo debo usar imágenes codificadas en Base64?

Use Base64 para imágenes pequeñas como iconos, logotipos y elementos de interfaz de usuario (normalmente de menos de 10 KB). Reduce las solicitudes HTTP y simplifica el despliegue. Evítelo para imágenes grandes, ya que el aumento del 33% en el tamaño perjudica el rendimiento. También es útil para plantillas de correo electrónico, documentos HTML de un solo archivo e imágenes de fondo CSS.

¿Se sube mi imagen a algún servidor?

No. Esta herramienta procesa las imágenes completamente en su navegador utilizando la API FileReader de JavaScript. Sus imágenes nunca salen de su dispositivo, garantizando total privacidad y seguridad. La conversión ocurre instantáneamente en su máquina.

¿Qué formatos de imagen son compatibles?

Este convertidor admite todos los formatos de imagen comunes, incluidos PNG, JPEG, GIF, WebP, SVG, BMP e ICO. La herramienta detecta automáticamente el tipo MIME y genera el prefijo de URI de datos correcto para cada formato.

¿Cuál es la diferencia entre una cadena Base64 y una URI de datos?

Una cadena Base64 es solo la representación de texto codificado de los datos de la imagen. Una URI de datos incluye un prefijo con el tipo MIME (como data:image/png;base64,) seguido de la cadena Base64. Las URI de datos se pueden usar directamente en atributos HTML src y valores CSS url().

Recursos adicionales

• Data URLs - MDN Web Docs
• Codificación Base64 - MDN Web Docs
• Base64 - Wikipedia