Imagen a Base64
Convierte imágenes PNG, JPG, WebP, GIF, SVG, AVIF y BMP a Base64 dentro del navegador. Puedes elegir el formato de salida entre Data URL, Base64 puro, url de CSS, etiqueta img de HTML y sintaxis de imagen de Markdown. Resulta ideal para incrustar iconos pequeños en el código del frontend, crear correos HTML, probar campos de imagen de una API o insertar imágenes en la documentación.
- Codifica los formatos de imagen habituales de forma local, sin subir el archivo de origen
- Cambia un mismo resultado entre Data URL, Base64 puro, CSS, HTML y Markdown
- Copia el resultado listo con un clic o expórtalo a TXT para la entrega y el archivo
- Convierte automáticamente al arrastrar la imagen y muestra el estado, el número de caracteres y el tamaño del texto
- Adecuado para imágenes sensibles a la privacidad y para entornos sin conexión
Suelta una imagen aquí o haz clic para elegir un archivo
Cuando elijas una imagen, la salida Base64 se genera automáticamente.
Incluye el prefijo data:image y se puede poner directamente en el atributo src o en CSS en línea.
Resumen
Un flujo de conversión centrado: importa la imagen, elige el formato de salida y copia o exporta el resultado. Todo el procesamiento ocurre dentro del navegador.
- 01
Admite varios formatos de imagen
JPEG, PNG, WebP, GIF, SVG, AVIF y BMP se procesan con el mismo flujo, sin configuración adicional.
- 02
Varias formas de salida
Un mismo resultado se puede cambiar a Data URL, Base64 puro, CSS, HTML o Markdown, para adaptarlo a distintos escenarios de integración.
- 03
Indicadores de estado y tamaño
Puedes consultar el estado de la conversión, el número de caracteres y el tamaño del texto, para juzgar si conviene incrustarlo en el código o en la documentación.
- 04
Funciona en local
La codificación se realiza dentro del navegador. El archivo no sale del dispositivo a menos que lo copies o lo exportes.
- 05
Copiar y exportar a TXT
Copia el resultado con un clic; si necesitas un entregable con seguimiento, también puedes descargarlo como archivo TXT.
- 06
Cómodo con contenido largo
El modo de pantalla completa es ideal para revisar Data URL muy largas sin que la maqueta lo interrumpa.
Cómo usarla
El flujo recomendado es: importa la imagen, elige el formato de salida, confirma el resultado y luego cópialo o expórtalo.
- 01
Arrastra la imagen al área de carga o haz clic para elegir un archivo.
- 02
Elige el formato de salida según dónde vayas a usar el resultado.
- 03
Espera a que termine la conversión automática. Cuando el panel de salida muestre «Listo», ya puedes usarlo.
- 04
Antes de incrustarlo en el código de producción, comprueba el número de caracteres y el tamaño del texto.
- 05
Copia el resultado en tu editor o descárgalo como TXT para la entrega y el archivo.
Detalles
Diseñado en torno a los flujos habituales de codificación de imágenes a Base64, generación de Data URL y preparación de recursos en línea.
- La codificación se ejecuta dentro del navegador; la imagen de origen no se envía a ningún servidor
- La salida Data URL se puede usar directamente en el atributo src y en CSS en línea
- El modo CSS devuelve un valor url(...) listo para usar en background-image
- El modo HTML devuelve una etiqueta img completa, práctica para fragmentos rápidos
- El modo Markdown devuelve una sintaxis de imagen apta para README y documentación interna
- Muestra en tiempo real el número de caracteres y el tamaño del texto, para valorar el coste antes de incrustar
- El botón de copia reduce la probabilidad de errar al añadir el prefijo o el formato a mano
- La exportación a TXT es útil para la entrega, la copia de seguridad y el registro de auditoría
- Procesa imágenes sensibles a la privacidad sin necesidad de servicios de terceros
- Ideal para probar payloads de API que transportan datos de imagen en un campo JSON
- Cambia rápido entre Data URL y Base64 puro para ajustarte a los requisitos del sistema receptor
- Admite la vista en pantalla completa para revisar cadenas codificadas muy largas
Casos de uso
Adecuado para recursos pequeños en línea, plantillas de correo, revisión de payloads de API, documentos autocontenidos y demos sin conexión.
-
Incrustar iconos pequeños
Incrusta imágenes muy pequeñas como Data URL para ahorrar una petición de red en la ruta crítica.
-
Imágenes en correos HTML
Prepara fuentes de imagen en Base64 para correos en los que los enlaces externos pueden bloquearse o eliminarse.
-
Pruebas de payload de API
Coloca los datos de imagen codificados en un campo JSON para validar el proceso de decodificación y almacenamiento del backend.
-
Documentación en Markdown
Incrusta imágenes directamente en README, bases de conocimiento y guías internas para que la documentación sea más portátil.
-
Demos de componentes
Crea demos autocontenidas con datos de imagen para entornos de sandbox o presentaciones sin conexión.
-
Flujos sensibles a la privacidad
Procesa imágenes sensibles en local, sin enviarlas a servicios de terceros.
-
Entrega de diseño temporal
Cuando el alojamiento de recursos temporales aún no está listo, puedes pasar antes el payload de imagen codificado al frontend.
-
Ajuste de unos pocos recursos clave
La página sigue usando URL estáticas en general, y solo se incrustan unas pocas imágenes pequeñas clave.
Ver también
Antes de codificar recursos de producción, conviene reducir primero los bytes innecesarios con Compresor de imágenes para evitar que el texto Base64 se alargue más de la cuenta. Tras pegar una Data URL larga o un payload puro en otro sistema, puedes hacer una comprobación de ida y vuelta con Base64 a imagen . Si el resultado va a ir en un atributo de HTML, una plantilla de correo o el código de un CMS, usa después Codificador y decodificador de HTML para revisar las entidades y los límites de los atributos, y detectar pronto truncados, errores de MIME o escapes rotos.
Buenas prácticas
Base64 encaja mejor con recursos pequeños en línea, en poca cantidad y con un propósito claro. Para imágenes grandes o muy reutilizadas, no suele ser la mejor opción.
- Úsalo preferentemente para iconos pequeños, imágenes de marcador de posición y recursos de demo de corta duración.
- Las imágenes de contenido grandes conviene seguir sirviéndolas con CDN, carga diferida y formatos modernos.
- Antes de poner una Data URL larga en la ruta crítica, mide su impacto en el first paint.
- Al usarlo en fondos CSS, procura que cada recurso codificado sea pequeño y vigila la ruta de renderizado.
- Antes de publicar la salida en CSS, HTML o Markdown, confirma que el entorno de destino admite data URI.
- Para probar APIs suele ser mejor usar Base64 puro y dejar el tipo MIME o el nombre de archivo en otros campos aparte.
- Los resultados destinados a la entrega puedes guardarlos como TXT, para facilitar el control de versiones y la auditoría.
- Es recomendable que el equipo acuerde qué recursos se pueden incrustar y cuáles deben distribuirse mediante URL estáticas.
Limitaciones
Base64 es una forma de codificar datos binarios como texto; por sí misma no reduce el tamaño del archivo.
- La salida Base64 suele ser alrededor de un tercio mayor que los bytes de origen, y ese peso pasa directamente al payload de HTML o CSS.
- Las Data URL muy largas son poco legibles y no resultan cómodas de mantener a mano.
- Algunos entornos antiguos aún pueden limitar la longitud de la URL o el modo de tratar los recursos incrustados; conviene probarlo antes de publicar.
- Los GIF animados y las imágenes de alta resolución generan resultados muy largos, y tanto copiarlos como mostrarlos puede volverse lento.
- Esta herramienta solo codifica: no cambia el tamaño de la imagen ni la comprime.
- Los recursos que se reutilizan con frecuencia suelen encajar mejor con URL estáticas cacheadas por CDN que con cadenas en línea muy largas.
Preguntas frecuentes
Aquí reunimos las dudas más habituales sobre los formatos de salida, el procesamiento local, los formatos admitidos y en qué flujos encaja esta herramienta.
¿Qué diferencia hay entre Data URL y Base64 puro?
La Data URL lleva un prefijo MIME, por ejemplo data:image/png;base64,, y se puede usar directamente en src o en CSS. El Base64 puro solo contiene el contenido codificado; el prefijo lo añades tú o el sistema receptor.
¿Por qué la cadena codificada es más grande que el archivo original?
Base64 representa datos binarios con caracteres imprimibles, lo que siempre añade sobrecarga. Un aumento de en torno a un tercio es normal.
¿Cuándo conviene convertir una imagen a Base64?
Encaja al incrustar iconos pequeños, insertar imágenes en correos HTML, probar payloads de API y crear documentos autocontenidos o demos sin conexión. No sustituye la forma habitual de distribuir la mayoría de las imágenes de contenido.
¿Esta herramienta sube mi imagen a un servidor?
No. La codificación se realiza dentro del navegador y el archivo no se envía a ningún tercero.
¿Puedo usar la salida de CSS o HTML directamente?
Sí. El modo CSS devuelve un valor url(...) apto para background-image, y el modo HTML devuelve una etiqueta img completa.
¿Qué tipos de imagen admite?
Admite JPEG, PNG, WebP, GIF, SVG, AVIF y BMP.
¿Por qué copiar o previsualizar un archivo grande se vuelve lento?
La salida codificada es mucho más larga que el archivo original, por lo que el navegador necesita más memoria y tiempo de proceso al copiar, dibujar y editar.
¿Es bueno para el SEO incrustar todas las imágenes como Base64?
No es recomendable. Puedes incrustar unas pocas imágenes pequeñas clave, pero la mayoría de las imágenes de contenido deberían mantenerse como URL estáticas cacheables.
¿Puedo usarlo para campos de imagen JSON de una API?
Sí. Normalmente el Base64 puro encaja mejor, y conviene poner el tipo MIME o el nombre de archivo en un campo aparte.
¿Se puede poner la salida Data URL en un background-image de CSS?
Sí. Con el modo CSS se genera un url(...) que se pega directamente en background-image.
¿Es lo mismo que un compresor de imágenes?
No. Solo codifica los datos de la imagen como texto; no cambia los píxeles ni reduce el tamaño del archivo original.
¿Cuándo es mejor una URL estática que Base64?
Para imágenes más grandes o recursos que se reutilizan en varias páginas, una URL estática cacheada por el navegador o por un CDN suele ser más clara y rápida.
Herramientas relacionadas
Combínalo con la compresión de imágenes, la conversión de formato y la decodificación de Base64 a imagen para formar un flujo de procesamiento de imágenes completo.