TanodTools
ES

Imagen a Base64

Convierte una imagen en una data URL en Base64 que puedes pegar directamente en HTML, CSS, Markdown o JSON.

Tus archivos nunca salen de tu dispositivo

Suelta una imagen aquí

PNG, JPEG, WebP, GIF, BMP, AVIF o SVG. O arrástrala a cualquier parte de esta página.

Se abre en este dispositivo. No se sube nada.

Una imagen a la vez, de hasta 10 MB. PNG, JPEG, WebP, GIF, BMP, AVIF y SVG.

Cómo convertir una imagen a Base64

  1. Elige una imagen o arrástrala a la página.
  2. Elige el formato que necesitas: data URL, Base64 simple, CSS, una etiqueta img de HTML o Markdown.
  3. Pulsa Copiar o descarga el texto como archivo.

Incrustar imágenes como texto

HTML, CSS, JSON, Markdown y el cuerpo de los correos son texto, pero las imágenes son binarias. Convertir una imagen a Base64 une ambos mundos: los bytes de la imagen se escriben con 64 caracteres seguros, así que la imagen completa puede ir dentro de una regla de una hoja de estilos, una etiqueta img o un archivo de configuración sin una descarga aparte.

Esta herramienta lee el archivo en tu navegador, comprueba su tipo real a partir de los primeros bytes y arma el fragmento que elijas alrededor del texto codificado. La imagen en sí no cambia: al decodificar el Base64 se obtiene exactamente el archivo original.

Consejos

  • Reduce primero la imagen con Comprimir imagen o Redimensionar imagen; cada byte que ahorras supone un tercio más de ahorro en Base64.
  • Para íconos simples, un SVG suele ocupar menos que cualquier PNG, incluso en Base64.
  • Para decodificar Base64 de vuelta a un archivo, o codificar cualquier otro archivo, usa Codificar y decodificar Base64.

Preguntas frecuentes

¿Qué es una data URL?

Una forma de meter los bytes de un archivo dentro de un enlace. Empieza con data:, el tipo de archivo, como image/png, y ;base64,, seguido del texto en Base64. Los navegadores la muestran exactamente igual que si la imagen se hubiera cargado desde un archivo aparte.

¿Por qué el Base64 ocupa más que la imagen?

Base64 escribe cada 3 bytes como 4 caracteres de texto, así que el texto ocupa alrededor de un 33 por ciento más que el archivo. Los servidores web que comprimen el texto recuperan parte de esa diferencia, pero una imagen incrustada sigue ocupando más que la misma imagen servida por separado.

¿Cuándo conviene incrustar una imagen?

Para cosas pequeñas: íconos, fondos diminutos y marcadores de posición de pocos kilobytes, o cuando se necesita un único archivo HTML o correo independiente. Las imágenes grandes es mejor dejarlas como archivos aparte, porque una data URL no se puede guardar en caché por sí sola y se vuelve a descargar con cada página u hoja de estilos que la contiene. La herramienta te avisa por encima de 100 KB.

¿Cómo se decide el tipo de archivo?

A partir de los bytes del archivo, no de su nombre, así que un PNG guardado con extensión .jpg recibe igualmente image/png. Los archivos SVG se reconocen por su texto y se etiquetan como image/svg+xml.

¿Se sube mi imagen?

No. La imagen se lee y se codifica en tu navegador, en tu dispositivo.