How to use the Image to Base64
- Drop an image onto the box, click to choose one, or paste a screenshot with Ctrl+V.
- Choose Data URI for a string that starts with
data:image/…;base64,or Base64 only for the raw encoded text. - Copy the result, or copy the ready-made CSS background rule or HTML
<img>tag. - Check the size overhead before inlining. Small icons are good candidates; large photos are not.
Features
- Data URI or raw Base64 output
- Ready-to-paste CSS background-image rule
- HTML img tag with width and height filled in
- Exact original size, encoded length and overhead
- Detects the image type from the file itself
- Works offline; the image never leaves your device
What Base64 encoding does
Base64 turns binary data, such as the bytes of a PNG file, into plain text that can travel anywhere text can: inside HTML, CSS, JSON, XML or an email body. It uses an alphabet of 64 safe characters (A–Z, a–z, 0–9, + and /). Every group of 3 bytes becomes 4 characters, and the end is padded with = signs when the byte count is not a multiple of three.
The size overhead, worked out
Because 3 bytes become 4 characters, Base64 text is about 33% larger than the file it encodes. The exact length is 4 × ⌈bytes ÷ 3⌉. A 6,000-byte icon becomes 4 × 2,000 = 8,000 characters. A 1 MB photo becomes roughly 1.33 MB of text, which is why the overhead figure above matters. Gzip or Brotli compression on your server wins some of that back, but never all of it.
Anatomy of a data URI
A data URI packs the file type and the data into one string:
data:image/png;base64,iVBORw0KGgo…
data:tells the browser the content is inline rather than at a web address.image/pngis the MIME type, which the tool reads from the file's own signature bytes.;base64,says the rest is Base64-encoded.
Paste it anywhere a URL is accepted: an <img src>, a CSS url(), a favicon link or a JSON field.
When inlining images helps
- Tiny icons and UI graphics of a few kilobytes, where saving a network request matters more than the extra bytes.
- Single-file documents, such as an HTML report or offline page that must work without any other files.
- APIs and configuration files that only accept text, for example sending an image inside a JSON body.
- Quick prototypes, CodePen demos and bug reports where hosting a file is inconvenient.
When it hurts
Inline images cannot be cached separately: they are downloaded again with every page or stylesheet that contains them. Large data URIs also bloat your CSS, which browsers must download before showing the page. As a rule of thumb, link to real files for anything bigger than a few kilobytes and for any photo. HTTP/2 and HTTP/3 make separate requests cheap, which removes most of the old reason to inline.
Email is a special case. Support for data URI images varies between email clients, and some block them entirely, so test with the clients your readers use or attach the image instead.
Tips
- Optimize first. Run the image through the Image Compressor or Image Resizer before encoding; every byte you save is a third bigger once encoded.
- For SVG icons, a URL-encoded data URI (with
%3Cfor < and so on) is often shorter than Base64 and stays readable. - To go the other way, paste a string into Base64 to Image. For text and other files, use the Base64 Encoder/Decoder.
Frequently asked questions
Why is the Base64 string bigger than my image?
Base64 represents every 3 bytes with 4 text characters, so the encoded text is about 33% larger than the original file. The exact overhead for your image is shown above the output.
What is the difference between Base64 and a data URI?
Base64 is just the encoded text. A data URI adds a prefix such as data:image/png;base64, so browsers know the file type and can use the string directly as an image source.
Is my image uploaded to encode it?
No. Your browser reads the file and encodes it locally. Nothing is sent to a server, and the page works offline once loaded.
Should I use Base64 images on my website?
Only for very small images such as icons of a few kilobytes. Larger images are better served as normal files, which load in parallel and can be cached by the browser.