Image to Base64
Encoder
Upload any image and get its Base64 string or Data URI instantly. Copy with one click, processed entirely in your browser.
Click or drag an image to upload
PNG, JPG, WebP, GIF, SVG
How It Works
Upload Image
Drop or select any image file (PNG, JPG, WebP, GIF, SVG).
Encode
Your image is converted to Base64 instantly in the browser.
Copy
Copy the Base64 string or full Data URI with one click.
Convierte imágenes a Base64 online para incrustarlas directamente en HTML, CSS, JSON o plantillas de correo. La herramienta de imagen a Base64 de ConverterUp genera una cadena codificada limpia o un data URI completo listo para pegar en una hoja de estilos, en un sprite SVG o en un documento markdown. Es útil para apps offline-first, correos transaccionales que deben funcionar sin peticiones externas y para incrustar iconos pequeños ahorrando peticiones HTTP. La codificación se ejecuta íntegramente en el navegador, así que mockups confidenciales y capturas internas nunca salen de tu máquina.
Cuándo tiene sentido incrustar como Base64
Incrustar brilla con activos de menos de 4 KB, donde el coste de una petición HTTP separada (DNS, TCP, TLS, cabeceras) supera la penalización del 33 % de tamaño del Base64. Iconos diminutos en pseudoelementos CSS, PNG transparentes de un solo píxel y spinners pequeños son los ejemplos canónicos.
Los correos transaccionales son el segundo caso claro. Los clientes de correo bloquean las peticiones a imágenes externas por defecto hasta que el destinatario pulsa 'mostrar imágenes', así que los logotipos e iconos incrustados se ven al instante. Sumado a que los correos suelen archivarse durante años, incrustar garantiza que la imagen siga viéndose en 2030 aunque tu CDN haya desaparecido.
Las PWAs offline-first y los informes HTML en un solo archivo (facturas descargables, dashboards exportados, PDF-como-HTML) se benefician de la incrustación por el mismo motivo: el documento es autocontenido y funciona sin red. Lo mismo con los bundles firmados que se distribuyen como archivo único.
Donde la incrustación falla: cualquier imagen por encima de ~10 KB, cualquier cosa reutilizada entre páginas (pierdes la caché HTTP), animaciones y fotogramas de vídeo y cualquier cosa que requiera lazy-loading. Para esos casos, mantén un archivo real y referéncialo por URL: la caché HTTP del navegador supera al inlining en 2-3 vistas de página.
ToolSeo.image-to-base64.section1.p5
Compensaciones de rendimiento que conviene conocer
La codificación Base64 infla los datos binarios exactamente un 33,3 %: cada 3 bytes de entrada se convierten en 4 caracteres de salida. Un PNG de 9 KB pasa a ser una cadena de ~12 KB. Gzip y brotli pueden recuperar parte de eso (~10-15 % para datos de imagen típicos), pero no toda la sobrecarga.
La pérdida de caché es la penalización mayor para activos reutilizados. Un logotipo de 50 KB referenciado como <img src="/logo.png"> se descarga una vez y se cachea para cada vista de página siguiente. El mismo logo incrustado en 20 correos o 20 páginas HTML se descarga 20 veces. Para un activo de una sola página da igual; para activos compartidos es un coste real de ancho de banda y de tiempo de parseo.
El tiempo de parseo de CSS crece de forma no lineal con el tamaño de la hoja en dispositivos modestos. Una hoja que pasa de 50 KB a 200 KB por imágenes incrustadas puede añadir decenas de milisegundos al primer pintado en móviles Android de gama media. Trata la incrustación como un presupuesto, no como valor por defecto.
Memoria: el navegador mantiene en memoria los datos de imagen decodificados y la cadena Base64 original hasta que se parsea el documento. Para activos incrustados muy grandes, esto puede duplicar brevemente el uso de memoria respecto a un archivo referenciado por URL.
ToolSeo.image-to-base64.section2.p5
Estructura del data URI y dónde pegarlo
El formato del data URI es data:<mime>;base64,<codificado>. Ejemplo: data:image/png;base64,iVBORw0KGgo…. El tipo MIME indica al consumidor cómo interpretar los bytes: image/png, image/jpeg, image/svg+xml, image/webp, etc. Si el MIME es incorrecto, el navegador rechazará renderizar la imagen aunque los bytes sean válidos.
En HTML: <img src="data:image/png;base64,…" alt="...">. En CSS: background-image: url("data:image/png;base64,…");. En JSON: guarda el data URI completo como cadena y asígnalo al src en el render. En Markdown:  funciona en la mayoría de renderizadores, pero comprueba que el tuyo no trunca cadenas largas.
Para SVG, es preferible incrustar el marcado SVG directamente (más barato y estilizable con CSS) en lugar de codificar el SVG en Base64. Si necesitas codificarlo, usa image/svg+xml como MIME y considera URL-encoding en lugar de Base64: produce un resultado más pequeño y legible para formatos basados en texto.
ToolSeo.image-to-base64.section3.p4
ToolSeo.image-to-base64.section3.p5
ToolSeo.image-to-base64.section4.heading
ToolSeo.image-to-base64.section4.p1
ToolSeo.image-to-base64.section4.p2
ToolSeo.image-to-base64.section4.p3
ToolSeo.image-to-base64.section4.p4
ToolSeo.image-to-base64.section4.p5
ToolSeo.image-to-base64.section5.heading
ToolSeo.image-to-base64.section5.p1
ToolSeo.image-to-base64.section5.p2
ToolSeo.image-to-base64.section5.p3
ToolSeo.image-to-base64.section5.p4
ToolSeo.image-to-base64.section5.p5
Preguntas frecuentes
¿Cuándo conviene incrustar una imagen como Base64?
Base64 tiene sentido para activos muy pequeños (menos de 4 KB), donde una petición HTTP separada cuesta más que la sobrecarga de tamaño. Para imágenes mayores conviene mantener archivos normales, ya que Base64 infla el tamaño un 33 % aproximadamente.
¿Hay un límite de tamaño de archivo?
ConverterUp acepta imágenes de hasta 25 MB. Las cadenas codificadas pueden quedar muy largas, así que la mayoría de editores y clientes de correo se atascan a partir de unos pocos megabytes.
¿Cuál es la diferencia entre cadena Base64 y data URI?
Una cadena Base64 son solo los bytes codificados, mientras que un data URI antepone el tipo MIME, como data:image/png;base64,.... Usa el data URI completo en src o url() y la cadena cruda cuando indiques el tipo por separado.
¿Qué formatos de imagen son compatibles?
PNG, JPG/JPEG, WebP, AVIF, GIF y SVG. El tipo MIME del data URI se asigna automáticamente según el archivo subido.
¿Puedo copiar el resultado directamente en JSON sin escapar?
Las cadenas Base64 contienen únicamente <code>A-Z</code>, <code>a-z</code>, <code>0-9</code>, <code>+</code>, <code>/</code> y <code>=</code>, todos seguros dentro de una cadena JSON. El data URI completo también es seguro en JSON. El único carácter que podrías necesitar escapar es la comilla JSON que envuelve el valor; los botones de copia de ConverterUp ya generan una cadena lista para JSON.
¿Debería usar Base64 o URL encoding para incrustar SVG?
Usa <strong>URL encoding</strong> para SVG. SVG es texto, así que codificar solo los caracteres no seguros (<code>%, #, <, ></code>, comillas) produce un resultado más pequeño y legible que Base64. Muchas herramientas de SVG a data URI usan URL encoding por defecto por ese motivo.
ToolSeo.image-to-base64.q7
ToolSeo.image-to-base64.a7
ToolSeo.image-to-base64.q8
ToolSeo.image-to-base64.a8