Image to Base64
Drop in an image and this tool encodes it as Base64 text, ready to paste directly into an HTML img tag, a CSS background, or a Markdown file, with no separate image file needed.
Drop images here or click to browse
Most image formats up to 50 MB each
Your images never leave your device
Most image formats, up to 50 megabytes each Your images never leave your deviceHow to use the Image to Base64
- Drop in your image.
- Pick the output you need: data URI, raw Base64, an img tag, CSS or Markdown.
- Copy the result with one click.
Features
- Five ready made output formats: data URI, raw Base64, HTML img tag, CSS background-image, Markdown.
- Copy button on every format.
- Shows the original size, encoded size and the roughly 33 percent overhead Base64 adds.
- Works on multiple images at once.
When should I use Base64 for an image?
Base64 is useful for small icons or a single critical image you want to inline directly into HTML or CSS to save an extra network request. It is a poor choice for large photos, since the roughly 33 percent size increase and the lack of separate caching usually cost more than the request it saves.
Which output format should you copy?
Use the data URI when you need the whole thing, prefix included, ready to drop straight into a src or url() attribute. Use the img tag or CSS background format when you want the surrounding HTML or CSS written for you as well, not just the encoded data. Use raw Base64 only when some other system, such as an API payload or a database field, expects the encoded text without a data URI prefix in front of it.
Does inlining an image as Base64 slow down a page?
It can, in a way that is easy to miss. An inlined image is embedded directly in the HTML or CSS file rather than loaded as its own file, which means the browser cannot cache it separately from the page, and every visit re-downloads it as part of the page's own text even if the image never changes. That tradeoff makes sense for a small icon used once, but stacking several inlined images, or inlining anything a visitor sees on more than one page, usually costs more over repeat visits than the network requests it was meant to save.
Frequently asked questions
Why is the Base64 output bigger than my original image?
Base64 encoding represents binary data as text, which adds about 33 percent to the size. A 100 KB image becomes roughly 133 KB of Base64 text.
What is a data URI?
A data URI is a Base64 string with a prefix describing its type, for example data:image/png;base64,, that a browser can display directly without a separate file request.
Is my image uploaded anywhere during this?
No, the encoding happens in your browser using JavaScript's own Base64 functions. Nothing is sent to a server.
Can I encode more than one image at a time?
Yes, drop in several images and each gets its own set of output formats and copy buttons, so you can grab each one separately.
Does the encoded text change if I resize or compress the image first?
Yes, since Base64 just encodes whatever bytes the file actually contains. Compress or resize the image with another tool first if you want a smaller encoded result, then encode the smaller file here.
Will this work for a favicon or an SVG icon, not just a photo?
Yes, any image file works, including SVG. A small SVG icon is actually one of the more practical uses for Base64 encoding, since it is often tiny to begin with.
