Imagen a Base64

Convierte cualquier imagen a una URL de datos codificada en Base64

¿Qué es y cómo funciona?

Esta herramienta convierte una imagen en una data URL en Base64 — una larga cadena de texto que contiene la imagen entera, empezando por algo como data:image/png;base64,iVBORw0KGgo.... Como la imagen se vuelve texto plano, puedes incrustarla directamente dentro de HTML, CSS o JSON en lugar de enlazar a un archivo aparte. El navegador lee la cadena y renderiza la imagen sin una petición de red extra, por eso los iconos pequeños, logos y gráficos de fondo suelen incrustarse así.

La contrapartida es el tamaño: la codificación Base64 hace que los datos sean alrededor de un tercio más grandes que el archivo original, así que compensa para recursos pequeños pero perjudica con fotos grandes. Incrustar un icono diminuto elimina una petición HTTP y evita un parpadeo de imagen ausente; incrustar una foto grande hincha tu HTML y suele ser peor que un archivo normal. Esta herramienta codifica la imagen por completo en tu navegador — no se sube nada — y te da la data URL lista para pegar en tu fondo CSS, etiqueta img o carga JSON.

Casos de uso

• Incrustar un icono pequeño: incrusta un logo o icono como data URL en CSS o HTML para eliminar una petición de red.
• Enviar o guardar una imagen como texto: convierte una imagen en una cadena Base64 para que pueda vivir dentro de un campo JSON o un canal de solo texto.
• Prototipar sin alojar: mete una imagen directamente en un único archivo HTML como data URL, sin un archivo de imagen aparte que gestionar.

Preguntas frecuentes

¿Por qué la versión Base64 es más grande que mi archivo de imagen?

Base64 representa datos binarios usando solo caracteres de texto, lo que añade alrededor de un 33% de sobrecarga. Es esperado e inevitable: la cadena codificada siempre es mayor que el archivo original, por eso incrustar conviene a recursos pequeños, no a fotos grandes.

¿Cuándo debería incrustar una imagen en vez de enlazarla?

Incrustar va mejor con gráficos pequeños y de uso frecuente — iconos, logos, fondos diminutos — donde eliminar una petición HTTP compensa el coste de tamaño. Para imágenes grandes o cualquier cosa cacheada y reutilizada entre páginas, un archivo enlazado normal suele ser más rápido.

¿Qué es el prefijo data: del principio?

Es la cabecera de la data URL: data: seguido del tipo MIME (como image/png), luego ;base64, para señalar la codificación, y después los bytes codificados. Los navegadores usan ese prefijo para saber cómo decodificar y mostrar la imagen directamente.

¿Se sube mi imagen a un servidor?

No. La codificación ocurre por completo en tu navegador, así que la imagen nunca sale de tu dispositivo. Puedes convertir con seguridad gráficos privados o sin publicar en data URLs.

Imagen

Redimensionador de imágenes · Compresor de imágenes · Selector de color de imagen · Filtros de imagen · Metadatos de imagen · Conversor SVG a PNG