Saltar al contenido

Convertidor de imagen a Base64 – Generador de data URI

Suelta una imagen y obtenla como texto Base64 o como data URI, etiqueta HTML, regla CSS o imagen Markdown lista para pegar. La imagen se lee en tu dispositivo y nunca se sube.

Funciona por completo en tu navegador. Nada de lo que pegas se envía a ningún lado.

Cómo convertir una imagen a Base64

  1. Agrega una imagen arrastrándola al recuadro, o tócalo para elegir un archivo de tu celular o tu computadora.
  2. Elige el formato en Resultado como: Data URI, Solo Base64, HTML <img>, Fondo CSS o Markdown. Con archivos SVG, decide si mantienes activada la codificación URL.
  3. Revisa la vista previa y los tamaños. La vista previa muestra la imagen tal como se ve desde el resultado, y una línea indica el tamaño original, el tamaño codificado y cuánto más grande es.
  4. Copia o descarga el texto con el botón de copiar o como archivo .txt.

Características

  • Cinco formatos listos para pegar: data URI, Base64 puro, una etiqueta HTML <img>, una regla CSS background-image y una imagen Markdown.
  • SVG con codificación URL, una alternativa más corta que Base64 para imágenes vectoriales.
  • Comparación de tamaños con el peso del archivo original, el del texto codificado y el porcentaje de aumento.
  • Vista previa en vivo generada a partir de los datos obtenidos, sobre un fondo de cuadros para que se vea la transparencia.
  • Muchos formatos: PNG, JPG, WebP, GIF, SVG, AVIF, ICO y BMP.
  • Codificación exacta, sin redimensionar ni perder calidad.
  • Consejo de tamaño cuando una imagen pasa de unos 10 KB.

Por qué usar el convertidor de imagen a Base64 de Fileora

Los logotipos, las capturas de pantalla y los recursos de diseño muchas veces son privados o todavía no se publicaron. Fileora lee y codifica el archivo en tu navegador, así que la imagen nunca sale de tu dispositivo. Es gratis, no pide registro y funciona en el celular, donde puedes elegir una imagen directamente de tu galería.

Cuándo conviene incrustar una imagen

Una data URI pone la imagen dentro de tu HTML, tu CSS o tu JSON en lugar de en un archivo aparte. Eso ahorra una petición de red, algo que ayuda en estos casos:

  • Íconos pequeños y formas simples, sobre todo en SVG, usados desde CSS.
  • Correos HTML y documentos de un solo archivo que tienen que funcionar sin archivos externos.
  • Marcadores de posición, como una miniatura borrosa que se muestra mientras carga la imagen completa.
  • Pruebas, demos y fragmentos de código que deben funcionar sin recursos adicionales.
  • API que reciben imágenes en Base64 dentro de un cuerpo JSON.

Cuándo perjudica

El texto Base64 ocupa cerca de un tercio más que la imagen que representa. Las imágenes incrustadas se vuelven a descargar cada vez que cambia la página o la hoja de estilos, porque no se pueden guardar en caché por separado. Además están en la ruta crítica: una imagen grande dentro de tu CSS retrasa toda la hoja de estilos y, con ella, el primer pintado de la página. Como regla general, incrusta solo imágenes de menos de unos 10 KB y sirve todo lo demás como archivo normal.

Para dejar una imagen por debajo de ese tamaño, redúcela primero con el compresor de imágenes o conviértela a WebP con el convertidor de imágenes. Si necesitas el color exacto de un ícono para tu CSS, el convertidor de colores te lo da en HEX, RGB, HSL y OKLCH.

Preguntas frecuentes

¿Cómo convierto una imagen a Base64?

Arrastra una imagen al recuadro o tócalo para elegir una. El texto codificado aparece al instante como data URI. Elige otro formato en Resultado como, por ejemplo Solo Base64, HTML, Fondo CSS o Markdown, y cópialo o descárgalo como archivo .txt.

¿Qué diferencia hay entre una data URI y Solo Base64?

Solo Base64 son los datos de la imagen codificados, sin nada más, que es lo que esperan la mayoría de las API y los campos JSON. Una data URI agrega delante un prefijo corto como data:image/png;base64, que le dice al navegador qué tipo de archivo es. Usa la data URI en cualquier lugar donde el navegador espere la dirección de una imagen, como el src de una etiqueta img o un url() de CSS.

¿Por qué el texto Base64 pesa más que mi imagen?

Base64 usa 4 caracteres de texto para representar cada 3 bytes del archivo, así que el resultado ocupa cerca de un 33% más que el original. La herramienta muestra el tamaño de la imagen, el tamaño del texto codificado y el porcentaje de aumento, para que decidas si vale la pena incrustarla.

¿Por qué mi SVG no se codifica en Base64?

Los archivos SVG son texto, así que se pueden poner en una data URI con codificación URL en lugar de Base64, lo que suele dar un resultado más corto. Esta opción viene activada por defecto para los SVG. Desactiva Usar codificación URL para SVG si la herramienta donde lo vas a usar necesita Base64.

¿Qué tipos de imagen acepta?

PNG, JPG, WebP, GIF, SVG, AVIF, ICO y BMP. El archivo se codifica exactamente como está, sin redimensionarlo ni volver a comprimirlo, así que la calidad de la imagen no cambia.

¿Conviene incrustar imágenes grandes en Base64?

Normalmente no. Las imágenes de más de unos 10 KB funcionan mejor como archivos normales: el texto codificado pesa más, no se puede guardar en caché aparte de tu HTML o tu CSS y retrasa el resto de la página. La herramienta te muestra un recordatorio cuando tu imagen pasa de ese tamaño.

Herramientas relacionadas

¿No encuentras la herramienta que necesitas o algo no funciona?

Cuéntanos qué herramienta te gustaría o qué salió mal. Leemos todos los mensajes, y las solicitudes deciden lo próximo que construimos.

Solicitar una herramientaInformar un problema

Abre tu app de correo. Por favor, no adjuntes archivos privados.