RunToolRunImage to Base64
Convert images to Base64 code.
How to Convert an Image to Base64
Select an image
Click the upload area or drop a JPG, PNG, WebP, GIF or SVG file.
Encoding happens instantly
The file bytes are encoded to a Base64 string in your browser, with a ready-to-paste data URI.
Copy the result
Copy the raw Base64, the data URI, or ready-made HTML / CSS snippets.
Turning a file into a string
The image bytes are encoded as Base64 text and wrapped in a data URI, which browsers accept anywhere an image URL is expected. The image then travels inside the HTML, CSS or JSON rather than as a separate file requiring its own request.
That is the entire benefit: one fewer network round trip. On a connection with high latency, a round trip can cost more than the bytes themselves, which is why the technique exists at all.
The 33% tax
Base64 represents three bytes as four characters, so an embedded image is about a third larger than the file. It also compresses worse than the original binary, so the penalty survives gzip and brotli.
For a 500-byte icon that is a few hundred wasted bytes against a saved request — a clear win. For a 200 KB photograph it is 66 KB of pure overhead added to a document that now cannot be cached separately.
The caching problem is the real cost
A separate image file is cached by the browser and reused across every page that references it. An embedded image is part of the document, so it is re-downloaded whenever the document changes and cannot be shared between pages.
This reverses the calculation on anything appearing site-wide. A logo embedded in every page's CSS is downloaded once and cached; a logo embedded in every page's HTML is downloaded again with every page. Embedding is for small, unique, above-the-fold assets, not for anything repeated.
Where it genuinely helps
Small icons in a stylesheet, images in an HTML email where external references are blocked by default, assets in a single self-contained file, and images inside JSON payloads where a URL is not available are all cases where embedding is the right answer.
SVG deserves a mention: for simple icons, inlining the SVG markup directly is better than Base64-encoding it, because the markup is smaller than its own encoding and can be styled with CSS afterwards.
Practical notes
Very long data URIs can hit limits in some tools and make source files unpleasant to work with — a single line hundreds of thousands of characters long breaks editors, diffs and code review. Keep embedded assets small enough to remain manageable.
Encoding happens in your browser, so the image is never uploaded. Compress and resize the image before encoding rather than after: the Base64 string is a third larger than whatever you feed it, so every byte saved beforehand is saved with interest.