Image to Base64 Converter
Convert an image to a Base64 data URI for embedding directly in HTML, CSS, or JSON — with size comparison and ready-to-use code snippets.
Copied to clipboard.
About this image to Base64 converter
Base64 encoding turns binary image data into plain text, which can then be embedded directly inside an HTML file, a CSS stylesheet, or a JSON payload instead of being referenced as a separate file. This matters whenever a separate network request for an image is inconvenient or impossible — a small icon you want baked directly into a single-file HTML tool, a background image inside a CSS file with no separate asset folder, or an image field inside an API request that only accepts text.
The tradeoff is size: Base64 text is roughly a third larger than the original binary file, since it re-encodes every 3 bytes of image data as 4 text characters. For a small icon or logo, that's a trivial cost. For a large photo, it usually isn't worth it — you lose the browser's ability to cache the image as its own separate file, and the extra size gets re-downloaded every time the page or stylesheet containing it loads, rather than once. This tool works with any image size, but the size comparison shown after converting is worth actually looking at before deciding to embed something large.
"Include data URI prefix" controls whether the output starts with data:image/png;base64, (or the matching type for your file) or is just the raw Base64 text on its own. The full prefix is what you need to paste directly into an <img src> attribute or a CSS url() — both ready-to-use snippets below the main output always include it regardless of the toggle, since they won't work without it. The raw, prefix-free option is for situations like an API field that expects only the encoded data and adds its own type information separately.
Nothing you upload is sent anywhere; the browser's own file-reading and encoding does all the work locally, and the result never leaves your device.
Frequently asked questions
What is a Base64 data URI actually used for?
It lets an image be embedded as text directly inside HTML, CSS, or JSON instead of being a separate linked file — useful for small icons in a single-file tool, backgrounds in a stylesheet with no asset folder, or image fields in an API that only accepts text.
Why is the Base64 output bigger than my original image file?
Base64 encodes every 3 bytes of binary data as 4 text characters, so the encoded text is roughly a third larger than the original file. This is an inherent, unavoidable property of the encoding, not something specific to this tool.
When should I avoid embedding an image as Base64?
For anything larger than a small icon or logo. Embedding a large photo bloats whatever file contains it and prevents the browser from caching the image separately, so it re-downloads every time rather than once. Base64 embedding is best reserved for small, frequently-reused graphics.
What's the difference between the two output options?
With the prefix included, the output is a complete data URI ready to paste into an <img src> or CSS url(). Without it, you get just the raw encoded text, for situations like an API field that expects only the data itself.
Is my image uploaded anywhere?
No. The conversion uses your browser's own built-in file reading and encoding; the image and the resulting text both stay entirely on your device.