Cómo usar: Imagen a Base64
- En Imagen → Base64, arrastra y suelta una imagen o selecciónala. Se lee localmente; no se sube nada.
- Copia el URI de datos, el fondo CSS ya preparado o el fragmento de código <img>. Desmarca la casilla «prefijo data:» si solo necesitas el código Base64 sin formato.
- Para los archivos SVG, cambia a la codificación URL; suele ser más corta que la codificación Base64.
- Para hacerlo al revés, abre «Base64 → Imagen», pega una cadena y descarga el archivo descodificado.
¿Qué es un conversor de imágenes a Base64?
Base64 es una forma de escribir datos binarios utilizando únicamente 64 caracteres de texto seguros (A–Z, a–z, 0–9, + y /). Convertir una imagen a Base64 te permite incrustarla directamente en HTML, CSS, JSON o una plantilla de correo electrónico como un URI de datos, en lugar de enlazar a un archivo aparte:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA…La parte que va antes de la coma indica el tipo MIME; el resto es el archivo codificado. Los navegadores lo tratan exactamente igual que una URL de imagen, así que funciona en <img src>, CSS background-image, <link rel="icon"> y en código de canvas.
El aumento de tamaño del 33 %
Base64 almacena cada 3 bytes del archivo como 4 caracteres, así que la cadena codificada es un 33 % más grande que la original (más el prefijo corto data: prefijo). Gzip o Brotli en tu servidor recuperan parte de ese espacio, pero los mayores inconvenientes son estructurales: una imagen incrustada se descarga de nuevo con cada archivo HTML o CSS que la contenga, no se puede almacenar en caché por sí sola y hace que tu hoja de estilos —que bloquea la visualización— sea más pesada.
Cuándo incluir imágenes en línea (y cuándo no)
- Ideal para: iconos pequeños, indicadores de carga y sprites de interfaz de usuario de menos de unos pocos KB, imágenes en firmas de correo electrónico HTML donde se bloquean las imágenes externas, informes HTML de un solo archivo y elementos de prueba en el código.
- No es una buena idea: fotos, imágenes de cabecera y cualquier cosa que supere los 10-20 KB aproximadamente. Sírvelas como archivos normales con almacenamiento en caché, compresión y
loading="lazy". Redúcelas primero con el Image Compressor.
SVG: la codificación de URL es mejor que Base64
El SVG ya es texto, así que no necesitas Base64 en absoluto. Un URI de datos codificado como URL, como data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'… solo escapa unos pocos caracteres (<, >, #, %) y suele ser entre un 20 % y un 30 % más corta que la versión Base64; además, sigue siendo legible y se comprime mejor con gzip. Esta herramienta ofrece ambas opciones para archivos SVG. Si trabajas mucho con SVG en CSS, la herramienta «SVG a CSS» también te puede ayudar.
Decodificar Base64 para volver a obtener una imagen
Pega un URI de datos completo o una cadena Base64 sin formato (base64url con - y _ también funciona). La herramienta detecta el formato real a partir de los bytes mágicos del archivo —PNG, JPEG, GIF, WebP, AVIF, SVG, ICO o BMP—, muestra una vista previa con las dimensiones y te permite descargar el archivo con la extensión correcta. Para Base64 que no sea una imagen, usa el codificador/decodificador general de Base64.
También se busca como: imagen en base64, uri de datos, de base64 a imagen, png a base64, svg a uri de datos, img src base64, fondo css en base64, imagen del decodificador base64.
Herramientas que combinan con: Imagen a Base64
- Generador de favicons — Crea un paquete completo de favicones a partir de un logotipo, una letra o un emoji: un archivo favicon.ico con varios tamaños, un icono táctil de Apple, iconos para Android y PWA, un webclip de Webflow, el manifiesto web y las etiquetas HTML para pegar.
- URL Encode / Decode — Percent-encode text for safe use in URLs, decode encoded strings back to readable text, and break any URL down into its parts and query parameters.
- Generador de códigos de barras — Crea códigos de barras escaneables para productos, inventario, envíos y bibliotecas: el sistema calcula automáticamente los dígitos de control y puedes descargar un archivo SVG de alta calidad para imprimir o un PNG para documentos.
- Escáner de códigos QR — Apunta con la cámara a un código QR o sube una imagen o captura de pantalla que contenga uno.
Preguntas frecuentes
¿Por qué la cadena Base64 ocupa más espacio que mi imagen?
¿Cómo se usa una imagen en Base64 en CSS?
url(): background-image: url("data:image/png;base64,…");. El fragmento de CSS de arriba ya está listo para pegarlo; solo tienes que cambiarle el nombre al selector.¿Incrustar las imágenes como Base64 mejora la velocidad de la página?
¿Es seguro subir fotos privadas aquí?
¿Por qué me da un error cuando pego el código Base64?
url() los elementos de envoltura y las comillas automáticamente.