Saltar al contenido
SPCXTools

Imagen a Base64

Convierte cualquier imagen en un Data URI en Base64 y cópialo como Base64 sin formato, fondo CSS, etiqueta img de HTML o Markdown.

Funciona en local: los archivos no salen de tu dispositivo

Cargando herramienta…

Cómo usar Imagen a Base64

  1. 1Elige una imagen o arrástrala a la página.
  2. 2Elige el formato de salida: Data URI, Base64 sin formato, CSS, HTML o Markdown.
  3. 3Comprueba el tamaño codificado que se muestra junto a la vista previa.
  4. 4Haz clic en Copiar y pega el código donde lo necesites.

Incrusta imágenes directamente en tu código

A veces necesitas una imagen sin un archivo independiente: un icono en una hoja de estilos, un logo en un informe HTML de un solo archivo, un marcador de posición en una respuesta de API JSON, una imagen en un documento Markdown o un fondo en una biblioteca de componentes. Este conversor codifica cualquier imagen a Base64 y le da formato listo para pegar: como URI de datos (Data URI), Base64 puro, un background-image de CSS, una etiqueta <img> de HTML o sintaxis de imagen de Markdown.

Características

  • Todos los formatos de imagen comunes: PNG, JPG, GIF, WebP, AVIF, SVG, ICO y más.
  • Cinco formatos de salida para diferentes usos.
  • Comparación de tamaño entre el archivo original y el texto codificado.
  • Vista previa de la imagen con cuadrícula de transparencia.
  • Copiar con un clic.
  • Privado: el archivo nunca sale de tu navegador.

Ejemplos de salida

Formato Ejemplo
Data URI data:image/png;base64,iVBORw0KGgo…
Base64 iVBORw0KGgo…
CSS background-image: url("data:image/png;base64,…");
HTML <img src="data:image/png;base64,…" alt="logo">
Markdown ![logo](data:image/png;base64,…)

Mantén las imágenes incrustadas pequeñas

Las imágenes incrustadas no se pueden almacenar en caché por sí solas y se vuelven a descargar con cada copia de la página u hoja de estilos que las contiene. Como regla general, incrusta solo imágenes que pesen unos pocos kilobytes. Reduce el tamaño de las imágenes primero con Comprimir imagen, convierte iconos vectoriales con SVG a PNG si necesitas un mapa de bits, o codifica otros archivos y texto con el conversor Base64.

Preguntas frecuentes

¿Qué es un data URI?
Un data URI incrusta un archivo directamente en el texto, con el formato data:image/png;base64, seguido de los bytes codificados. Los navegadores lo muestran exactamente igual que una imagen cargada desde una URL, pero sin necesidad de hacer una petición adicional.
¿Por qué la versión en Base64 es más grande que la imagen?
Base64 codifica cada 3 bytes como 4 caracteres de texto, por lo que el resultado es aproximadamente un 33% más grande que el archivo original. Cuando una página se sirve con compresión gzip o Brotli, se recupera parte de esa sobrecarga.
¿Cuándo debería incrustar imágenes en Base64?
Para imágenes pequeñas —iconos, logotipos pequeños, marcadores de posición e imágenes en correos HTML o documentos de un solo archivo— donde importa evitar una petición adicional. Para fotos grandes, es mejor usar un archivo de imagen normal porque se puede almacenar en caché por separado y no aumenta el tamaño de tu HTML o CSS.
¿Los clientes de correo muestran las imágenes en Base64?
La compatibilidad varía. Muchos clientes de correo web bloquean o eliminan las imágenes data URI, por lo que para los boletines suele ser más fiable alojar las imágenes o incluirlas como adjuntos en línea.
¿Se sube mi imagen?
No. Tu navegador lee y codifica la imagen. No se envía nada a un servidor.