Convert an image to Base64 (data URI)
Upload an image and directly get a data:image/...;base64,... string ready to paste into CSS or HTML, to embed a small icon without an extra network request.
How it works
Want to embed a small icon, logo, or pictogram directly into a CSS stylesheet (for example as a background-image) or into HTML, without adding a separate file or an extra network request? Upload your image: it's encoded into a Base64 string preceded by the right prefix data:image/png;base64, (or jpeg, gif, webp... depending on the detected format), directly usable as a URL value in your code.
When should I use a Base64 image rather than a separate file?
It's mostly relevant for very small images (icons, pictograms, small logos): it avoids an extra HTTP request and can simplify deploying a self-contained component. For heavier photos or images, a separate file remains preferable: Base64 increases the size by about 33% and isn't cached independently by the browser.
Is the image format detected automatically?
Yes. The tool analyzes the first bytes of the uploaded file to determine its actual format (PNG, JPEG, GIF, WebP...) and writes it into the prefix of the generated string, without relying on the file name's extension.
100% local processing in your browser (WebAssembly) — your image is never sent to a server.