Image to Base64
Turn a picture into a data URI you can paste straight into a stylesheet or a page — and see how much bigger it gets, which is the part that decides whether you should.
How to use it
- Choose an image, or drag one onto the box.
- Pick the wrapping you want: the bare data URI, a CSS rule, an
imgtag, or Markdown. - Copy it and paste it where the image would have gone.
What a data URI is
Normally an image lives in its own file and a page points at it, which costs one round trip to fetch it. A data URI puts the whole picture inside the text of the page or the stylesheet, written in Base64 so that it survives being stored as text. The browser never asks for a second file, because there is no second file.
When it is worth it, and when it is not
Base64 makes the data about a third larger, and that growth is shown above so you can judge it. For a 300-byte icon the trade is obvious: you turn a whole network request into 400 characters of text. For a 400 KB photograph it is almost always a mistake, and for three reasons.
First, a data URI cannot be cached on its own — it is part of the file it sits in, so it is re-downloaded every time that file changes. Second, it blocks: a stylesheet stops the page from painting until it has arrived, so a huge image inside it delays everything. Third, it cannot be loaded lazily, resized by the browser, or served in a better format to browsers that support one.
The rule of thumb that holds up: a few kilobytes, inline it; anything you would call a photograph, leave it as a file.
Frequently asked questions
Is my image uploaded to convert it?
No. Your browser reads the file from your device and encodes it in the page. Nothing is sent anywhere, which matters here more than usual - people often inline logos and signatures that they would not want sitting on someone else's server.
Why is the text bigger than the file?
Because Base64 writes three bytes as four characters, which is about 33% more, plus the small prefix that names the type. That is the price of carrying binary data inside something that can only hold text, and it is shown above so the decision is made with the number in front of you.
Does this work for SVG files?
Yes, and an SVG is the one case where you should think twice about Base64 at all. SVG is already text, so it can be inlined directly or percent-encoded, which is usually smaller than Base64 and stays readable. Base64 still works and is safe if the SVG contains characters that upset your stylesheet.
Will the image look any different?
No. Base64 is an encoding, not a compression: every byte of the original file is preserved exactly and the browser decodes it back to the same picture. Nothing is re-drawn, re-compressed or resized here.
Can I go the other way, from Base64 back to an image?
Paste the data URI into your browser's address bar and it will show the picture, which you can then save. This page only goes one way, because turning text back into a file is a different job with different failure modes.
Is my text sent anywhere?
No. Everything happens in JavaScript inside your own browser. Nothing is uploaded and nothing is saved - close the tab and it is gone.