Convert images to Base64 data URIs — 100% in your browser
Processing uses browser-native Canvas and File APIs, so output can vary slightly between browsers. All processing runs locally in your browser.
An image file is a stream of binary bytes. Base64 re-encodes those bytes using only 64 printable characters (A–Z a–z 0–9 + /), so the result can live inside HTML, CSS or JSON where raw binary cannot. Every 3 input bytes become 4 characters (3×8 = 24 bits → 4×6 bits). Because the alphabet holds 64 symbols, the string grows by about 33% over the raw file. The data: URI simply prefixes the MIME type (data:image/png;base64,) so a browser can decode it back into a real image.
Bytes 0x48 0x69 0x21 are the text 'Hi!'. Split into 6-bit groups, each maps to one alphabet symbol: S, G, k, h. 'data:image/png;base64,…' tells the browser which decoder to run on the string.
A 200 KB PNG you want to ship without a separate network request.
Convert images to Base64 DataURL. Everything runs locally; nothing is uploaded.
FreeToolHub Image to Base64 is a free browser-based tool — convert images to Base64 DataURL. No signup, no upload; everything runs locally in your browser.
Convierte imágenes a DataURL Base64. Soporta JPG, PNG, WebP, GIF y SVG. Copia o descarga. Gratis, 100% en el navegador.
Este conversor codifica imágenes en data URLs de Base64: las cadenas autocontenidas como data:image/png;base64,iVBOR... que incrustan imágenes directamente en HTML, CSS y JSON sin ninguna petición de archivo aparte. Acepta JPG, PNG, WebP, GIF y SVG, muestra la longitud codificada y el incremento de tamaño frente al archivo original, y emite la data URL completa o solo la carga útil de Base64. Los fragmentos listos para CSS y para HTML te permiten pegar el envoltorio correcto para background-image frente a etiquetas <img> sin editar a mano.
Los desarrolladores web que incrustan iconos y logos pequeños para eliminar peticiones HTTP en páginas críticas para el rendimiento. Los diseñadores de correo que incrustan imágenes que sobreviven a clientes que bloquean el alojamiento externo. Los ingenieros frontend que incrustan assets dentro de componentes de un solo archivo y configuraciones JSON. Y cualquiera que construya generadores de PDF o DOCX que requieren imágenes inline convierte aquí primero. La lectura del incremento de tamaño mantiene honestas las decisiones: codificar infla los archivos alrededor de un 33 %, así que orienta la elección entre inline y archivo para cada imagen.
(1) Sube o arrastra una imagen: JPG, PNG, WebP, GIF o SVG. (2) La herramienta lee el binario, lo codifica en Base64 y ensambla la data URL con el tipo MIME correcto. (3) Lee el panel de salida: data URL, Base64 crudo, recuentos de bytes del original y del codificado, y el porcentaje de inflación. (4) Copia como data URL, como sintaxis CSS de background, como etiqueta <img>, o descarga el texto. Todo se codifica localmente: la imagen nunca se sube, que es el punto para assets sin publicar.
La incrustación gana para assets pequeños y críticos para el renderizado: iconos, logos y placeholders de unos 5-10 KB, donde eliminar un viaje de red importa más que los bytes ahorrados. También es la única opción cuando un documento debe ser realmente de un solo archivo: informes HTML autónomos, plantillas de correo para clientes que bloquean imágenes remotas, y cargas JSON incrustadas. Los costes son reales más allá del 33 % de inflación: las imágenes en Base64 no pueden cachearse por separado, así que cada carga de página las vuelve a llevar; no pueden cargarse de forma diferida; y las cadenas inline grandes inflan el CSS y el HTML de maneras que ralentizan el análisis. La práctica moderna se apoya en la multiplexación de HTTP/2 y las CDN, reservando la incrustación solo para las pocas imágenes críticas. El SVG tiene un caso especial: como texto vectorial suele ser mejor incrustarlo como marcado SVG crudo en lugar de Base64, para mantenerlo estilable y programable.
La incrustación en Base64 destaca para iconos, logos e imágenes decorativas donde una petición HTTP extra cuesta más que el incremento de tamaño: correos HTML de un solo archivo, demos autocontenidas e imágenes de fondo CSS. Para fotos grandes o cualquier cosa reutilizada en muchas páginas, un archivo normal con caché del navegador casi siempre es la mejor elección.
Un 33 % más grande: Base64 codifica cada 3 bytes de datos binarios como 4 caracteres de texto. Un PNG de 100 KB se convierte aproximadamente en una cadena de 133 KB. Ese incremento es la razón principal por la que la incrustación se reserva para assets pequeños; en una foto de 1 MB desperdicia ancho de banda e infla tu HTML.
La salida es una data URL —data:image/png;base64,...— una imagen completa empaquetada en una sola cadena. Puedes pegarla directamente en un <img src>, un url() de CSS, un enlace de favicon o una carga JSON. Los navegadores la decodifican al momento, sin ninguna petición de red.
No. El archivo se lee localmente con la API FileReader del navegador y se codifica en memoria. Nada sale de tu dispositivo, lo que hace la herramienta adecuada para assets internos, capturas bajo NDA o cualquier imagen que no subirías a un servicio de terceros.
Base64 Data URLs embed image data directly in HTML, CSS, or JSON as text—no separate HTTP request needed. This reduces server round-trips for small images (icons, logos), enables self-contained HTML emails, and simplifies API payloads. However, Base64 encoding increases file size by ~33%, so use it only for images under 50KB.
JPG, PNG, WebP, GIF, and SVG. The tool outputs a complete Data URL string (data:image/png;base64,...) that you can paste directly into HTML <img> src attributes, CSS background-image properties, or JSON API fields. You can also download the encoded string as a text file.
What do you call a really smart cookie?
No signups, no data sold. Every tool is free to use — the free tier allows 5 downloads or saves per day, and the optional Pro plan ($7/mo, $59/yr) adds unlimited downloads, batch processing, white-label exports and an ad-free experience.
☕Support me on Ko-fi— support the free tier100% of proceeds go towards hosting & building more free tools.