Convertidor de Imagen a Base64 - Codifica Imágenes como Data URIs

Codifica una imagen como data URI en Base64 y cópiala como etiqueta img de HTML, valor url() de CSS, Markdown, o la cadena en bruto. La codificación se ejecuta en tu navegador; nada se sube.

Qué hace Imagen a Base64

Esta herramienta lee tu archivo con la API FileReader del navegador y lo devuelve como un data URI: la cadena `data:image/png;base64,` seguida de los bytes del archivo reescritos en Base64. Base64 es una codificación de transporte, no un esquema de compresión. Mapea cada 3 bytes binarios a 4 caracteres ASCII tomados de A-Z, a-z, 0-9, más y barra, lo que significa que la forma codificada siempre es aproximadamente un 33% más grande que el archivo con el que empezaste. Nada cambia en la imagen en sí — los píxeles, el formato, el perfil de color y cualquier metadato EXIF sobreviven intactos, y decodificar la cadena te devuelve un archivo idéntico byte a byte. Lo que ganas es una representación hecha enteramente de caracteres seguros para pegar en código fuente, por eso los data URI funcionan en cualquier lugar donde se espere una URL: un src de img, un url() de CSS, una imagen de Markdown, un campo JSON. La herramienta construye esos cuatro fragmentos por ti y copia la cadena completa incluso cuando la vista previa en pantalla está truncada, porque un data URI de una imagen modesta llega a decenas de miles de caracteres y renderizarlos todos bloquearía la página. Junto a cada archivo muestra el tamaño original, el tamaño codificado y el porcentaje de sobrecarga, así que el coste de insertarlo es visible antes de comprometerte. La lectura ocurre por completo en tu dispositivo; no se sube ningún archivo, y la página sigue funcionando sin conexión de red.

Por qué codificar una imagen en Base64

Un data URI convierte una imagen en texto, lo que elimina la necesidad de un archivo separado y una petición HTTP separada. Eso es realmente útil para recursos pequeños y una mala idea para los grandes.

Inserta un icono, sprite o marcador de posición pequeño directamente en HTML o CSS y ahorra una ida y vuelta en el primer renderizado
Distribuye una imagen dentro de un único archivo autocontenido — una página HTML independiente, una plantilla de correo, un bookmarklet, un PDF generado
Incrusta datos de imagen en JSON, YAML, o una columna de base de datos que solo acepta texto
Reproduce un error o escribe un fixture de prueba sin subir un archivo binario al repositorio

Cómo convertir una imagen a Base64

Cuatro pasos, todos locales — el archivo se lee en el navegador y la cadena se construye en tu dispositivo.

1

Suelta una imagen o varias — cada archivo obtiene su propia tarjeta con las cifras de tamaño

2

Revisa el tamaño codificado y la sobrecarga; por debajo de unos 10 KB es donde insertarlo suele merecer la pena

3

Elige la salida que necesites — Base64 en bruto, una etiqueta img de HTML, una declaración url() de CSS, o Markdown

4

Copia el fragmento al portapapeles o descárgalo como un archivo .txt

Preguntas frecuentes

Porque Base64 es una codificación, no un compresor. Representa 3 bytes binarios usando 4 caracteres ASCII imprimibles, así que la salida siempre es aproximadamente un 33% más larga que la entrada, más unos pocos bytes para el prefijo data:. Ese crecimiento es inherente al formato y no hay ningún ajuste que lo evite. Si necesitas un archivo más pequeño, comprime la imagen antes de codificarla — el paso de codificación solo puede añadir tamaño.
Insértala cuando el recurso sea pequeño y siempre necesario: iconos, espaciadores de 1x1, texturas de fondo diminutas, aproximadamente por debajo de 10 KB. Por debajo de eso, ahorrar una petición HTTP suele compensar la penalización del 33% de tamaño. No insertes fotos, imágenes principales, ni nada por encima de unos 100 KB. Un data URI grande no se puede almacenar en caché de forma independiente, tiene que volver a descargarse con cada revisión de la página o la hoja de estilos, y bloquea el analizador hasta que se ha leído por completo.
A menudo no. Gmail elimina directamente los data URI de las etiquetas img, y los clientes de escritorio de Outlook nunca los han admitido de forma fiable. Apple Mail y algunos clientes de webmail sí los renderizan. El enfoque fiable para el correo sigue siendo una URL de imagen alojada, o un adjunto CID referenciado con cid: en el src. Prueba en los clientes que realmente usan tus destinatarios antes de depender de datos insertados.
Sí, y no tiene pérdida — los bytes decodificados son idénticos al archivo original, incluyendo los datos EXIF y de perfil de color. Pega un data URI completo en la barra de direcciones de un navegador y la imagen se renderiza. En código, atob() en JavaScript o base64 -d en la línea de comandos lo hará. Ten en cuenta que la salida en bruto de esta página omite el prefijo data:, así que vuelve a añadirlo si el destino espera un URI completo.
No. SVG ya es texto, así que Base64 añade un 33% para nada. En su lugar, pega el marcado directamente en tu HTML, lo que además permite que CSS estilice las formas y que JavaScript las alcance. Para fondos CSS, usa un SVG codificado como URL en url() en vez de uno en Base64 — se mantiene más pequeño y comprime mejor con gzip. Base64 para SVG solo tiene sentido donde se requiere un URI estricto y la codificación por porcentaje no es una opción.
No hay ningún límite en la especificación de HTML o CSS, y los navegadores modernos manejan data URI de varios megabytes en atributos src. Los límites prácticos están en otro sitio: las barras de direcciones normalmente cortan alrededor de 2 MB o menos, algunas configuraciones de servidor y CDN limitan el tamaño de cabeceras y peticiones, y las cadenas muy largas ralentizan notablemente el análisis. Esta herramienta no impone ningún límite propio, pero avisa por encima de 100 KB porque ahí es donde insertarlo deja de merecer la pena.
No. El archivo se lee con la API FileReader del navegador, que opera sobre el identificador de archivo local, y la cadena resultante permanece en la memoria de la página. Nada se envía por la red y no hay ningún componente en el servidor, así que la herramienta sigue funcionando sin conexión una vez cargada la página. Las copias al portapapeles pasan por el portapapeles estándar del navegador, no por nosotros.
Todos, para imágenes — los data URI en el src de img y en url() de CSS funcionan desde IE8 y hoy se admiten universalmente. El portapapeles es la pieza más nueva: navigator.clipboard requiere un contexto seguro, así que en HTTP simple o en navegadores antiguos esta página recurre a seleccionar el textarea y usar document.execCommand('copy'). Si ambas vías fallan, verás un mensaje pidiéndote que selecciones y copies el texto tú mismo.

Más herramientas de imagen

Explora otras herramientas poderosas para tus necesidades de edición

Comprimir Imagen

Reducir tamaño

Redimensionar

Cambiar dimensiones

Recortar Imagen

Cortar área

Convertir Formato

Cambiar formato

Editor de Fotos

Editar fotos

Rotar Imagen

Rotar imagen

Voltear Imagen

Horizontal/Vertical

Agregar Marca de Agua

Marca de agua

Añadir Borde

Añadir borde de imagen

Esquinas Redondeadas

Añadir esquinas redondeadas

Filtros

Brillo/Contraste

Difuminar Rostro

Ocultar rostros

Mosaico

Desenfocar regiones

Quitar Fondo

Eliminar fondo

Mejorar Imagen

IA upscale

Añadir Texto

Añadir texto a imagen

Collage

Combinar múltiples imágenes

HTML a Imagen

Web a imagen

GIF a Secuencia

Extraer frames

Recortar imagen

Eliminar bordes vacíos

Renombrar imágenes por lotes

Cambia nombres de archivos en lote con seguridad

Recorte Circular

Recorta imágenes en círculos

Blanco y Negro

Convierte imágenes a escala de grises

Dividir Imagen

Corta una imagen en una cuadrícula

Fusionar Imágenes

Combina varias imágenes en una

Cambiar DPI

Ajusta los metadatos de DPI de la imagen

Imágenes a PDF

Combina imágenes en un solo PDF

HEIC a JPG

Convierte fotos HEIC del iPhone a JPG

Eliminador de EXIF

Consulta y elimina metadatos ocultos en fotos, incluyendo la ubicación GPS

Generador de Favicons

Conjunto completo de iconos más HTML

Paleta de colores

Extrae colores de una imagen

Base64 a Imagen

Descodifica Base64 de vuelta a una imagen

HEIC a PNG

Convierte fotos HEIC del iPhone a PNG sin pérdida

Texto detrás de la imagen

Coloca texto detrás del sujeto de una foto, todo en tu navegador

Selector de color

Obtén el HEX, RGB y HSL de cualquier píxel

Creador de firmas

Dibuja tu firma y descárgala como PNG transparente

Eliminador de fondo para firmas

La tinta del papel, sobre transparencia

Creador de fondos transparentes

Haz transparente un fondo